How To Make YouTube Videos Responsive In Blogger

You should make youtube videos responsive in blogger blog to improve the user experience. Actually, when we embed videos from youtube, it defines a static height and width. In fact, those videos are not responsive too. Therefore I am providing this little tips to make videos responsive for any media screen. This method will work through CSS. You don’t need to implement any javascript code. So there is nothing to worry about the performance and speed of your blog.

As a matter of fact, videos could be very important to make our readers understand the topic, increase user engagement, make our blog post rich and valuable etc. Also, if you have your own youtube channel and you are creating video tutorials too, you will need to embed those videos to your relevant blog posts. In this way, you will get more views, followers, and subscribers for your youtube channel. I have published an article to optimize youtube channel through a blog by adding a youtube subscribe button.

But the big thing is, if you can’t make those youtube videos responsive, it will destroy the responsiveness of your favorite blogger template. Moreover, there is a huge chance to lose mobile visitors for your blog. All things considered, I will recommend you to make your youtube videos responsive in blogger and get 100 times better popularity for each of your blog posts. Also, for making every blog posts more reader friendly, engaging and rich. So let’s see the process.

Make YouTube Videos Responsive In Blogger:

The entire process of making youtube videos responsive in blogger blog has two major part. We can do it by implementing a small snippet of CSS code into our blogger template once. Finally, we can grab video iframe code from youtube and paste it into the blogger blog post inside a customized “<div>…..</div>”. Let’s go for the first part:

1. Login to the Blogger account by clicking here and go to the “Template/Theme” area as shown below.
2. Now click on the “Edit HTML” button (at the right-hand side).
3. After that, you will see the blogger template HTML editor. From here, find the ending “]]></b:skin>” code.
4. Grab the following CSS snippet and paste it right above the “]]></b:skin>” as shown below.

/* Responsive Video By https://bloggersorigin.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%;}

5. Finally, click on the “Save Template” button and you are done. So we have successfully implemented the CSS code to make youtube videos responsive in our blogger blog. Now let’s go for the rest.

Add Responsive YouTube Videos In Blogger Post:

This is the time to grab our desired youtube video iframe code and make it responsive while inserting into any blog post. Actually, this will be a continuous process. You have to follow these steps every time to make any video responsive for any blog post. But the fact is, it is a very easy process and needs few clicks.

1. We know that we must log in to YouTube to get video embed code. So do it with your Google account (Gmail) username and password. Select your desired video and click on the “Share” > “Embed” link as shown below and copy the video iframe code.

2. Head back to your blogger account and create a “New Post”.
3. Select the “HTML” mode of the blogger blog post editor. (Usually, it remains in “Compose” mode.)
4. Find the exact area you wish to add the video inside your blog post. Copy the following HTML code and paste it into that area.

Code:

<div class="video-embed-area">
<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/P4zfxEVqYaw" frameborder="0" allowfullscreen></iframe>
</div>
</div>

5. Finally, replace the highlighted iframe code with your selected (step 1) youtube video code. That’s it. You will find the video responsive after publishing your blog post.

Note: You can follow the above process to make your existing youtube videos responsive. Also, if you wish to add more than one video into a single blog post, you can do it.

The process was very easy and hope you will be able to make youtube videos responsive in blogger. Also, I would like to recommend you to optimize youtube videos before embedding in your blog. Please share this post with your friend by using the following share buttons to support me.