How to Add Responsive Facebook Videos to Your 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…
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.
not working.
lol can you state exact error of problem you had?
When its a vertical video, its not working. horizontal yes
Thx for this, Valentin. Would this work in the same way for YouTube videos which, if you just paste in the URL, are not responsive?
Hi allfive, try this tutorial for YouTube: [url=https://www.ostraining.com/blog/coding/responsive-videos/]https://www.ostraining.com/…[/url]
I believe simple css styles make YT embed iframes responsive.
Thanks @ostrainingcomments, it worked
Glad to hear that 🙂
WOOOOOOW! It worked! Thank you so much from Brazil !!!
is working perfect, but, how can you limit the width on desktop?
You should use media queries to target a browser width range and then apply different style for width and height and maybe even add max-width and max-height depending on the final result that you would like to achieve
Hey! Thank you for this guide. So far, I was able to add the post in my blogpost. It is even responsive. But: I have several lines of text in the Facebook post. The text will not be displayed if the window is reduced or if seen on mobile. Any suggestions? This is my website: [url=http://www.hellobhutan.ch/2017/05/07/the-babyshower-experience/]http://www.hellobhutan.ch/2…[/url]
Cheers from a Swiss guy in Bhutan
It works perfectly.
This fix worked perfectly for me! Thank you so much! Simply awesome!
tks a lot… it have solved my problem…
Thanks!!! Perfect
its working great job
It worked but it doesn’t show my fb embed’s full post, just the video. How do I show the text and engagement info (number of likes, comments, etc)?
Great work dude! Super simple.
Hi,
glad you liked it 🙂
is there a way to make it work with the JS API of FB? it states we are supposed to use a div, not an iframe, for example something like:
Hi 1lias3,
Instead of “iframe”, switch it to “fb-video”
Thank you Nick.
it turns out my problem was not related to the way i was embedding the FB videos. i had a bootstrap div: “”
which somehow was blocking the whole video from showing up. i couldnt tweak it, and ended up removing the div…
thank you for your time!
Thanks a lot!! it works great.
ciao
unfortunately, it doesn’t work with videos that are in portrait mode. I can only see half of the video..
How can I style the classes in the iframe?
No way
It shows a part of the video in smaller screens.
padding-bottom is hardcoded. Height is not responsive
Same issue as Lukas and Jeponks… :(((
Any way to solve it?
This was awesome and worked great. Thanks <3
Hi! Where do I inject this code in Squarespace?
Simple, clean, took me less than 60 seconds to implement. Thank you Valentin!!
The issue with facebook videos is that they don’t always have ratio 56.25%. When watched directly, there is black background added on the sides (if video is vertical), but when embedded, The video gets cut on the bottom.
Excelente! Works like a charm, thanks.
Video is loading with Sound and a black screen
Thanks worked for me!
[quote=Jhon]When its a vertical video, its not working. horizontal yes[/quote]
I have the same problem.
If I adjust this figure: “padding-bottom:56.25%;” to make it work on mobile phones, then it looks like way too much space between the Facebook review and the next item below on a PC which is horizontal.
Is there a solution to this?
This fix worked perfectly for me
Thanks, bro works great…
Thank you so much, works perfectly!
Thanks a lot!!Super simple!!!
You are welcome, Eva!
Still works!!
Thanks a bunch
I love youuuuuuuuu!!! Thanks so much!!! It works very well!
It’s working great.
thanks a lot!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Thanks man, works perfectly fine for me. Your help is much appreciated!
nice its working thanks
Thank you, Valentín, for this wonderful post, and for sharing your knowledge. I think it will brighten the day of several of my colleagues! I shared your page inside a private Facebook group for my fellow music teachers since we often have a need to embed FB video on our Websites!
Thanks for sharing the blog, Broc! We are happy that you found answers at OSTraining.