[HOW TO] Make Youtube Videos Responsive in Blogger

You have responsive blogger template used in your website and everything is fine for high end device to low end device. But the problem is for youtube video you want to embed in your site. I doesn't perform and show responsive accordingly.

But it's not a big problem for the responsive blogger templates to embed youtube videos. You just need to add the CSS Code in your blog stylesheet and include the embedded youtube code in div defining the CSS.

After you create a post go to HTML button at top and paste the youtube embedded code and save.

<iframe width="560" height="315" src="//www.youtube.com/embed/OR1JL2TmAf8" frameborder="0" allowfullscreen></iframe>

 Check the post in mobile and PC you will see the youtube video is not responsive and shows the fixed width and height.

For this problem you need to add the <div> tag in above iframe as:

<div class="video-responsive"><iframe width="560" height="315" src="http://www.youtube.com/embed/OR1JL2TmAf8" frameborder="0" allowfullscreen></iframe></div>

You have added the class for the youtube embedded code iframe. So that you need to create the CSS class in your blogger CSS StyleSheet.

• Go to Blogger Template and click Edit HTML button. 
• Then press Clt+F and search <style type='text/css'> Then paste the CSS code below the <style type="text/css>. The CSS code is :

.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

You have just embedded the youtube video in your responsive website. You can check in large and small devices. The embedded videos will be automatically fit in your screen.

That's It
RefreshIt