how to make the facebook post embed (iframe version) responsive?

Question

As long as you embed facebook photos (i'm talking only about the iframe version in this context) the solution described in Embedding facebook post on responsive website is fine.

But the quesion is: how to make a real facebook post embed responsive? example iframe:

<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fmashable.tech%2Fposts%2F10153931394037919&width=500" width="500" height="482" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>

please note: i'm not able to use the JavaScript-SDK version, have to use the iframe.

Having the same problem too. This is for a facebook post embed not a video post embed. — basagabi, Dec 20 '16 at 09:03
You'll find no solution for this issue. You have to use the FB Javascript SDK — michbeck, Dec 20 '16 at 12:20
@michbeck can you detail a little more? I am also struggling with the same issue (facebook post embed) for the last 2 hours. :D — Nada Le Coupanec, Feb 03 '20 at 23:13
@NadaLeCoupanec as far as i know the FB javascript sdk is still the only option you can use — michbeck, Feb 04 '20 at 07:12
Thank you! I ended up making everything scrollable: https://stackoverflow.com/a/19650278/10619827 — Nada Le Coupanec, Feb 04 '20 at 11:26

score 0 · Answer 1 · answered Oct 23 '21 at 14:29

What about a jQuery solution?

jQuery( window ).on( "load resize", function () {
    jQuery( 'iframe[src*="facebook.com"]' ).each(function() {

        /* get width of parent element */
        var width = Math.round( jQuery( this ).parent().width() );
        if ( width > 500 ){ width = 500; } else if ( width < 180 ){ width = 180; };

        /* replace width value in iframe src */
        var src = new URL( jQuery( this ).attr( "src" ) );
        src.searchParams.set( "width", width );

        /* append new width */
        jQuery( this ).attr( "src", src );
        jQuery( this ).attr( "width", width );

    });
});

This script gets the width of the parent element and adjusts the iframe accordingly.

how to make the facebook post embed (iframe version) responsive?

1 Answers1