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:

{codecitation}<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>{/codecitation}

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:

{codecitation}<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>{/codecitation}

Step #4. Add the CSS

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

{codecitation css}.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;
}{/codecitation}

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

Instructor

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

0 0 votes
Blog Rating
Subscribe
Notify of
51 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Felipe de Castro

not working.

KeKeli

lol can you state exact error of problem you had?

Jhon

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

DonS

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

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

Analike Emmanuel

I believe simple css styles make YT embed iframes responsive.

Analike Emmanuel

Thanks @ostrainingcomments, it worked

mihha

Glad to hear that 🙂

Kaique

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

dragomir voicu

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

mihha

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

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

It works perfectly.

Jen Mulligan

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

Caetano Finisterre Burjack

tks a lot… it have solved my problem…

Vũ Hà

Thanks!!! Perfect

Kamlesh Sindhal

its working great job

CCee

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

Great work dude! Super simple.

mihha

Hi,
glad you liked it 🙂

1lias3

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

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

1lias3

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

Thanks a lot!! it works great.

ciao

jeponkz

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

Daniel Lucindo

How can I style the classes in the iframe?

Vally Pepyako

No way

Lukas Athanasiou

It shows a part of the video in smaller screens.

Rostyslav Shapran

padding-bottom is hardcoded. Height is not responsive

Anonymous

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

SepBaz.com

This was awesome and worked great. Thanks <3

Jen

Hi! Where do I inject this code in Squarespace?

Christian Rea

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

Filip

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

Excelente! Works like a charm, thanks.

Mebin

Video is loading with Sound and a black screen

Steven Rodriguez

Thanks worked for me!

Robin Long

[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

This fix worked perfectly for me

kamal hines

Thanks, bro works great…

Sandra

Thank you so much, works perfectly!

eva peng

Thanks a lot!!Super simple!!!

alex-smirnov

You are welcome, Eva!

Matt

Still works!!
Thanks a bunch

A

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

Sallu bro

It’s working great.

Sallu bro

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

Twjst

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

deepak

nice its working thanks

Broc Hite

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

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