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