Responsive facebook embed video

This is what I found to work -- especially in cases where I wanted to have two videos side-by-side for larger screens, using the CSS position-bottom CSS causes a miscalculation.

It seemed far easier to simply resize the videos:

function resizeVideos() {
  var aspectRatio = .5625;   
  var containerWidth = jQuery(".facebook-responsive").width();
  $(".facebook-responsive iframe").attr("width", containerWidth);
  $(".facebook-responsive").height(containerWidth * aspectRatio);
};

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

$(window).resize(resizeVideos);

I did try using the Facebook SDK approach and the videos appear to adjust correctly without these changes but the load time is so painfully slow (10 seconds at least) that using iFrames still seems the way to go.

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>

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

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