How to make fb-video mobile responsive ?

[SimranChawla1995]

No description provided.

[SimranChawla1995]

It's adding top padding. I'm not able to remove it from div with class
._3wo2._7gxm{
padding-top: 89px
}

[szymsza]

I get the same error with just pure FB SDK only on touch devices - weird situation. This workaround works for me

window.fbAsyncInit = function() {
    FB.init({
        // ...
    });

    // ------------------ FACEBOOK EMBEDDED VIDEO MOBILE WORKAROUND
    var removeTopPadding = 89;

    if ('ontouchstart' in document.documentElement) {
        FB.Event.subscribe('xfbml.render', function (a, b) {
	    var videos = $("[fb-xfbml-state='rendered'][data-href*='videos']");

	    videos.each(function () {
	        var $iframe = $(this).find("iframe");
		$iframe.height($iframe.height() + removeTopPadding);
		$iframe.css("margin-top", "-" + removeTopPadding + "px");
	    });
         });
     }
};

It increases height of the iframe by 89 pixels and moves it 89 pixels up, negating the effect of the padding.

However, this might not work in the future if the SDK changes.