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.

How to Add Responsive YouTube Video in Blogger Blog

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.

How to Add Responsive YouTube Video in Blogger Blog

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.

Affilaite Disclaimer - The post you are reading might contain few affiliate links, that states if you buy any product clicking on those links I may receive a small commission out of it, no additional cost to you at all. This way you are helping me running this site effectively. I share unbiased view-point from my personal experience. Full Disclaimer

Man Behind the Blog - Navin Rao

Blogger | WordPress Savvy

Navin Author
A WordPress Savvy, Content Strategist and creator of this blog. At QuestionCage we talk about Technology, SEO, WordPress to make your blogging venture much successful and eventually let the passive money to flow in.

Along with QC, I maintain my personal blog NavinRao.com as well, where I share my experiences and tips only on WordPress.

2 thoughts on “2 Ways to Add Responsive YouTube Video in Blogger Blog”

  1. Definitely good to know Navin. I have obsessed over Facebook Live videos but need to get those 1080 p viids on YT pumping again. Much more search engine potential and traffic potential on YouTube. FB Live rocks but YT offers us better leveraging, by far.


    • There is no second thought Ryan, YouTube streaming is just awesome. I agree one can get the huge active audience on Facebook, but in terms of quality, YouTube wins so far 🙂


Leave a Comment

QuestionCage Logo Main

Better Security for your WordPress Blog

Get rid of all the Malware injections and stay away from vulnerabilities. Spend a few minutes and sleep tight. Enter your email and get acess to the article.

You have Successfully Subscribed!