2 Ways to Add Responsive YouTube Video in Blogger Blog

Having a responsive youtube video embedded in your site is very important. The content whether it is video or text should not look cluttered.

Adding a Youtube video into your website is not rocket science at all.

As youtube or any other video sites provide the embed code for it. So that the users can easily embed videos on their own site.

And though the provided code used to be an iframe code, so and your site may not be according to that.

So, in this case, you have to make it a Responsive YouTube Video to make it look good in all the blog layouts and devices.

So, in this case, you have to make it a Responsive YouTube Video to make it look good in all the blog layouts and devices.

Add Responsive YouTube Video in Blogger

Now we need to add few codes into the Blogger Template, but you don’t have to do it all the time while embedding YouTube Videos.

Step 1. Go to your Blogger Dashboard – Template – Edit HTML

Step 2. After getting into Edit HTML, CTRL+F and search for ]]></b:skin> or </style>

Step 3. Add the code below before ]]></b:skin> or </style>

.videoyoutube{text-align:center;margin:auto;width:100%;}
.video-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;}
.video-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

Step 4. Add the below code before </body> tag

<script type=’text/javascript’>
//<![CDATA[
// Youtube Responsive
setTimeout(function(){$(“.video-youtube”).each(function(){$(this).replaceWith(‘<iframe class=”video-youtube loader” src=”‘+$(this).data(“src”)+'” allowfullscreen=”allowfullscreen” height=”281″ width=”500″></iframe>’)})},5e3);
//]]>
</script>

Step 4. Once the above code added, click Save Template.

We are done adding codes in our template, and you don’t have to do the same going further. Except for adding the code in the individual posts which you want to embed responsive videos.

Steps to Add videos on your Blogger Post

Step 1. Now you need to copy the code below and add in the blog post where you would like the videos to appear.

<div class=”videoyoutube”>
<div class=”video-responsive”>
<div class=”video-youtube loader” data-src=”<strong>Copy And Paste Embed Video Link Here</strong>”>
</div>
</div>
</div>

As mentioned above after copying the above code in the blog post, you need to replace the Youtube video link with the above text “Copy And Paste Embed Video Link Here“

Check the below example for better understanding, I have replaced the text with a YouTube link.

For Example: How to Embed code in the Blog Website

<div class=”videoyoutube”>
<div class=”video-responsive”>
<div class=”video-youtube loader” data-src=”https://www.youtube.com/watch?v=EceSgY9bDnc”>
</div>
</div>
</div>

Once you follow the above procedure, you would be able to see the video responsiveness in all kinds of devices.

If you find the above process a little difficult?

If you are not a techie or don’t want to touch too many codes, Don’t worry we can have an alternate solution as well. It’s very simple..!

Make Video Responsive in Blogger Without touching Codes

If you are thinking what if something goes wrong to your Blogger blog while adding too many codes in the template while making the video responsive.

As it could be frustrating fixing it, so many bloggers may want. If you are one of them then read on for a simple solution.

Without spending much time, let’s dive into and make the videos responsive in your blogger blog.

Step 1. Open the link, to open embed responsively website

You can find plenty of video sources on this website, you can also make Vimeo video responsive, daily motion, etc.

Step 2. Paste the code youtube video URL in the provided section there and Click on Embed.

You will find the video preview and code below it.

Step 3. Now simply Copy the Embed code and paste it in your blog post.

That’s it, you are done with embedding responsive YouTube Videos. These days there are several blogger templates for youtube videos in which the developers integrate such codes to perform it well in all the devices.

Let us know if this tutorial helped in the comment section below.