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 a rocket science at all.

WP Rocket - WordPress Caching Plugin

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 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=”Copy And Paste Embed Video Link Here“>
</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 an 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 proceducre, you would be able to see the video responsivess in all kind 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..!

How to make Embedded Video Responsive in Blogger Without touching many Codes

If you are thinking what if something goes wrong to you Blogger blog while adding too many codes in the template while making 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 a 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.

2 Ways to Add Responsive YouTube Video in Blogger Blog
Liked it? Rate this post

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.

    Ryan

    • 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

Subscribe To QuestionCage

Glad to see your Visit at QuestionCage!

One more step to connect ahead "Subscribe to Us" and get the updates to your inbox directly.

You have Successfully Subscribed to QuestionCage!

Share
Share
Tweet