How to Add Responsive Facebook Videos to Your Website

| Coding Tutorials
Responsive Facebook Videos on Any Website

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...

EmbedPress - WordPress Embed Facebook Embeds If you're using WordPress, we highly recommend you check out the EmbedPress plugin. You can create responsive Facebook video Embeds, using just the URL.

Download EmbedPress

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.

1

  • Copy the embed code.

2

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.