How to Add Responsive Facebook Videos to Your Website

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…

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.

Author

  • Valentin Garcia

    Valentin discovered Joomla in 2010, and since then he has considered it as the best CMS. Valentin has been coding extensions and templates for Joomla for many years and truly enjoys helping people build their own websites with Open Source tools. He lives in San Julián, Jalisco, México.

1 1 vote
Article Rating
Subscribe
Notify of
guest

51 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Felipe de Castro
Felipe de Castro
7 years ago

not working.

KeKeli
KeKeli
7 years ago

lol can you state exact error of problem you had?

Jhon
Jhon
6 years ago
Reply to  KeKeli

When its a vertical video, its not working. horizontal yes

DonS
7 years ago

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?

steve
steve
7 years ago
Reply to  allfive

Hi allfive, try this tutorial for YouTube: [url=https://www.ostraining.com/blog/coding/responsive-videos/]https://www.ostraining.com/…[/url]

Analike Emmanuel
Analike Emmanuel
7 years ago
Reply to  allfive

I believe simple css styles make YT embed iframes responsive.

Analike Emmanuel
Analike Emmanuel
7 years ago

Thanks @ostrainingcomments, it worked

mihha
mihha
7 years ago

Glad to hear that 🙂

Kaique
Kaique
7 years ago

WOOOOOOW! It worked! Thank you so much from Brazil !!!

dragomir voicu
dragomir voicu
7 years ago

is working perfect, but, how can you limit the width on desktop?

mihha
mihha
7 years ago
Reply to  dragomir voicu

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

Ozzie
Ozzie
7 years ago

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

José Rubén Juárez Mendoza
José Rubén Juárez Mendoza
7 years ago

It works perfectly.

Jen Mulligan
Jen Mulligan
7 years ago

This fix worked perfectly for me! Thank you so much! Simply awesome!

Caetano Finisterre Burjack
Caetano Finisterre Burjack
7 years ago

tks a lot… it have solved my problem…

Vũ Hà
Vũ Hà
7 years ago

Thanks!!! Perfect

Kamlesh Sindhal
Kamlesh Sindhal
7 years ago

its working great job

CCee
CCee
7 years ago

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)?

iddigital
iddigital
7 years ago

Great work dude! Super simple.

mihha
mihha
7 years ago
Reply to  iddigital

Hi,
glad you liked it 🙂

1lias3
1lias3
7 years ago

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:

Nick
7 years ago
Reply to  1lias3

Hi 1lias3,
Instead of “iframe”, switch it to “fb-video”

1lias3
1lias3
7 years ago
Reply to  Nick Savov

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!

Andrea Urbini
Andrea Urbini
6 years ago

Thanks a lot!! it works great.

ciao

jeponkz
jeponkz
6 years ago

unfortunately, it doesn’t work with videos that are in portrait mode. I can only see half of the video..

Daniel Lucindo
Daniel Lucindo
6 years ago

How can I style the classes in the iframe?

Vally Pepyako
Vally Pepyako
6 years ago
Reply to  Daniel Lucindo

No way

Lukas Athanasiou
Lukas Athanasiou
6 years ago

It shows a part of the video in smaller screens.

Rostyslav Shapran
Rostyslav Shapran
6 years ago

padding-bottom is hardcoded. Height is not responsive

Anonymous
Anonymous
6 years ago

Same issue as Lukas and Jeponks… :(((
Any way to solve it?

SepBaz.com
SepBaz.com
6 years ago

This was awesome and worked great. Thanks <3

Jen
Jen
6 years ago

Hi! Where do I inject this code in Squarespace?

Christian Rea
Christian Rea
6 years ago

Simple, clean, took me less than 60 seconds to implement. Thank you Valentin!!

Filip
Filip
6 years ago

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.

Marcelo Cotta
Marcelo Cotta
5 years ago

Excelente! Works like a charm, thanks.

Mebin
Mebin
5 years ago

Video is loading with Sound and a black screen

Steven Rodriguez
Steven Rodriguez
5 years ago

Thanks worked for me!

Robin Long
Robin Long
5 years ago

[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?

Jinu
Jinu
5 years ago

This fix worked perfectly for me

kamal hines
kamal hines
5 years ago

Thanks, bro works great…

Sandra
Sandra
5 years ago

Thank you so much, works perfectly!

eva peng
eva peng
5 years ago

Thanks a lot!!Super simple!!!

alex-smirnov
5 years ago
Reply to  eva peng

You are welcome, Eva!

Matt
Matt
4 years ago

Still works!!
Thanks a bunch

A
A
4 years ago

I love youuuuuuuuu!!! Thanks so much!!! It works very well!

Sallu bro
Sallu bro
4 years ago

It’s working great.

Sallu bro
Sallu bro
4 years ago

thanks a lot!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Twjst
Twjst
4 years ago

Thanks man, works perfectly fine for me. Your help is much appreciated!

deepak
deepak
4 years ago

nice its working thanks

Broc Hite
Broc Hite
3 years ago

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!

mikall
3 years ago
Reply to  Broc Hite

Thanks for sharing the blog, Broc!  We are happy that you found answers at OSTraining.  

51
0
Would love your thoughts, please comment.x
()
x