Coding Tutorials

Facebook allows you to embed videos from their site in your own website.

However, by default Facebook videos are not responsive.

In this short tutorial, I'm going to show you how to make your Facebook video embeds responsive by adding a few lines of CSS. Let's start...

Step #1. Get the Facebook video embed code

• Go to Facebook and find the video you want to embed.
• Click the down arrow.
• Click on Embed.

• Copy the embed code.

Step #2. Use the embed code

Paste the embed code in your website. It will look similar to the example below:

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

Step #3. Modify the embed code

Wrap the embed code with a div tag. Use the CSS class facebook-responsive; your code now would look like this:

<div class="facebook-responsive">
    <iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fostraining%2Fvideos%2F10152269755926568%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>

Step #4. Add the CSS

Add the below CSS properties inside one of your stylesheet files:

.facebook-responsive {
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}

.facebook-responsive iframe {
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

Your Facebook video embeds now will be responsive. Resize your browser to see it in action.

About the author

Valentín creates beautiful designs from amongst the tequila plants of Jalisco, Mexico. You can see Valentín's design work all over this site and you can often find him helping members in support.