Responsive facebook embed video

Question

I need to make a facebook video embed responsive, since facebook has a "fixed" size, however it does not adapt to the size of the screen.

When I put "auto" in the width of facebook, depending on the video it leaves the height much larger than normal, as shown below (leaves the height at 1100, being normal of it is 770)

https://developers.facebook.com/docs/plugins/embedded-video-player/?prefill_href=https%3A%2F%2Fwww.facebook.com%2Frobertdowneyjr%2Fvideos%2F665148873653581%2F#configurator

Because multiple videos of different sizes will be included, it is not possible to leave a fixed size on some external div.

Answer 1

Now Facebook supports responsive video embed

<script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>
<div class="fb-video"
    data-href="https://www.facebook.com/watch/?v=10155278547321729"
    data-width="auto"
    data-show-captions="false">
</div>

Answer 2

Add a container Div around your video:

HTML

<div class="facebook-responsive">
    <iframe src="https://www.facebook.com/plugins/videosource" width="560" height="315" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>
</div>

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;
}

Use the container around your div to control it's maximum width and the set the height and width of the iframe to 100%.

Answer 3

Add a container Div around your video:

HTML

<div class="facebook-responsive">
    <iframe src="https://www.facebook.com/plugins/videosource" width="560" height="315" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>
</div>

JS

function resizeFacebookVideos() {
    var ths = $('.facebook-responsive');

    var containerWidth = ths.width();
    var iframeOldWidth = $(ths).find("iframe").width();
    var iframeOldHeight = $(ths).find("iframe").height();

    $(ths).find("iframe").attr("width", containerWidth);
    $(ths).find("iframe").attr("height", iframeOldHeight * (containerWidth / iframeOldWidth));
}

$(document).ready(function () {
    resizeFacebookVideos();
});

$(window).resize(resizeFacebookVideos);