A Quick and Easy Guide To Make Your Youtube, Facebook Videos Responsive

Videos are the best source of communication currently. The best way to express your emotions as well as reaching a huge audience. Many people Vlog and put the videos on their sites too. But the problem with iframes is that they are not responsive without adding the piece of code which will be given below.

Here I'll show you how to make your videos responsive on your websites. Basically a Youtube video code looks like this:

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

Which specifically defines the dimensions of the video. Width will be max at 560px while height of the player will be 315px. Similarly, here is Facebook's version of a embeddable video:

<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2FRecodeDotNet%2Fvideos%2F1150133498356325%2F&show_text=0&width=560" width="560" height="315" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>

Which in technical terms does the same work with a little bit more customization though. Likewise, here is a Kickstarter Project video:

 <iframe width="480" height="270" src="https://www.kickstarter.com/projects/andromium/the-superbook-turn-your-smartphone-into-a-laptop-f/widget/video.html" frameborder="0" scrolling="no"> </iframe>

So technically speaking all these 3 platforms have the same code to embed videos on other websites. But since the width and height limit is being defined, the video doesn't look right on mobile or other platforms where screen size comes into play.

Fixing Your CSS 

In order to make your videos responsive, we'll first be taking a dive into your website's CSS. When you have opened your website's template code, press CTRL+F to reach the section which deals with your posts' dimensions and insert the following code in between:

.video-container {

    position: relative;

    padding-bottom: 56.25%;

    padding-top: 30px; height: 0; overflow: hidden;

}

.video-container iframe,

.video-container object,

.video-container embed {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}

When that is done insert <div class='video-container'> before the code of the respective video. Like this:

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

Result:

And for Facebook:

<div class='video-container'><iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2FRecodeDotNet%2Fvideos%2F1150133498356325%2F&show_text=0&width=560" width="560" height="315" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe></div>

And walah, the result:

So finally it brings us to Kickstarter:

 <div class='video-container'><iframe width="480" height="270" src="https://www.kickstarter.com/projects/andromium/the-superbook-turn-your-smartphone-into-a-laptop-f/widget/video.html" frameborder="0" scrolling="no"> </iframe></div>

And the resultant:

And that's that. Easy does it right? Let me know if you guys have problems with the code, I'll help you out straight away!