DESIGER

Howdy! My people, today our blog post topic is making YouTube videos responsive in blogger blog. 

Doing this aint gonna take your time much, it only requires add small CSS snipet to your blog template and everything gets fixed. 

YouTube videos seems to be essential in a blog post like the alphabets used in composing a blog post. We normally add YouTube videos to clearify examples and explanations to our readers.

Some YouTube video have a pre-defined width and height, when this video is added to our blog post, this video goes against its boundary by covering our blog writing picture and some times it might even cover the entire page. For this main reason, we are going to make our YouTube videos responsive for our blog post to look as good as normal and increase our blog user experience.

Step 1

1.    Simply login to your blogger dashboard, click on Template, a new window will appear, click on Edit HTMl.

2    Now find the end of css "]]></b:skin>"

3.    Copy the below code and paste it above the "]]></b:skin>" tag.

/* Responsive Video By http://
www.blogornate.com
-------------------------------------------------------------------
--------- */
.video-embed-area { margin: 0px auto; max-width:
560px;}
.video-container { max-width: 100%; height: 0;
position: relative; overflow: hidden; padding-
bottom: 56%;}
.video-container iframe { position: absolute; top: 0;

left: 0; width: 100%; height: 100%;}

Now click on "Save".(see image above)

Step 2

After adding the CSS code, the blog template can now generate responsive YouTube video, now we will have to add the modified YouTube video code into our blog post. 

1.    Now login to your YouTube account, choose the video you want to embed in your blog post, click share => Embed link. Now you will see the "<iframe>" code copy it.(see image below)

2.    Now come back to your blog dashboard, compose a new post, click "New post", after writing your post in the post editor, locate and click "HTML" at the top left side.

3.    Now copy and paste the below code at the area of your post you want the video to appear.

<div class="video-embed-area">

<div class="video-container">

</div>

</div>

Now we will have to edit the above code. 

At the place writen "paste your YouTube video code here", replace it with the copied YouTube video iframe code. 

Hope you enjoyed this tutorial, dont forget to read and share, we love comment.