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