Facebook page embed iframe doesn't fill container width

Question

I added an iframe of wikipedia to demonstrate the problem I have.
The Wiki iframe is displayed correctly like it suppose to, but the facebook iframe isn't.

HTML:

   <div class="iframe-fb-container mt-4">
      <iframe class="iframe-fb" width="450" height="700" style="border:1px solid black;overflow:hidden" scrolling="yes" frameborder="0" allowTransparency="true" allow="encrypted-media" src="https://www.facebook.com/plugins/page.php?href=https://www.facebook.com/Microsoft/&tabs=timeline%2Cevents%2Cmessages&width=450px&height=700px&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=2235597906716847"></iframe>
      <iframe class="iframe-fb" width="450" height="700" style="border:1px solid black;overflow:hidden" scrolling="yes" frameborder="0" allowTransparency="true" allow="encrypted-media" src="https://fr.wikipedia.org/wiki/Main_Page"></iframe>
   </div>

CSS:

.iframe-fb-container {
    border: 1px solid blue;
 }

 .iframe-fb {
    width: 100%;
    }

As you can see I am asking facebook an iframe with width of 450px and in the images attached the width of the emulator is 375px, but still the fb iframe doesn't fill it container like the wikipedia iframe does.

How can I make fb iframe to fill it container?

Weft

Answer 1

You can't make it 100% in a normal way.

This is your iframe src:

https://www.facebook.com/Microsoft/&tabs=timeline%2Cevents%2Cmessages&width=450px&height=700px&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=2235597906716847"></iframe>

Note that there is parameter: width=450px.

It set the width of the iframe content to be 450px.

According to Facebook Plugin documentation:

The pixel width of the plugin. Min. is 180 & Max. is 500.

So the maximum width Facebook can get is 500.

Mesozoic

Answer 2

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.

Andreeandrei

Answer 3

Facebook states on the Page Plugin site

The plugin will by default adapt to the width of its parent container on page load (min. 180px / max. 500px), useful for changing layout

and

No Dynamic Resizing The Page plugin works with responsive, fluid and static layouts. You can use media queries or other methods to set the width of the parent element, yet: The plugin will determine its width on page load It will not react changes to the box model after page load. If you want to adjust the plugin's width on window resize, you manually need to rerender the plugin.

So I would think your best option would be to fill the width of the parent as much as possible (up to the 500px limit), and then centre it in the parent. If you try over riding the CSS set by facebook, it starts to display incorrectly, such as the posts not filling the timeline.

Dresden

As you can see in the attached images the width is 375px and I am asking fb 450px and don't get, the resize issue is well known. – Weft

Answer 4

Facebook's Page Plugin it's not working as a responsive container, you have to add width from minimum 180px to maximum 500px as per the documentation.

You can also look at some other answers, I hope it'll help you out. Thanks

Responsive width Facebook Page Plugin

Impression

I requested width=450. – Weft

Answer 5

After asking in the facebook bug platform I got this answer from them which helped to solve this issue once and for all:

As already answered by other people in stackoverflow, according to the documentation, https://developers.facebook.com/docs/plugins/page-plugin/, you can specify the width for the plugin, however, "100%" is not something supported.

Quotes from facebook documantion are not helping unless you refernce them against an error in the code, the documentation says as follows:

The pixel width of the plugin. Min. is 180 & Max. is 500

It's not saying anything about not supporting 100% width of the parent container!
The only answer that was close to figure it out was Alon's and that's why he got the bounty.

So eventually this is the code I ended up with:

HTML:

 <div class="iframe-fb-container">
   <iframe class="iframe-fb border" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media" src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FGringo.co.il%2F&tabs=timeline&width=400&height=700&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=2235597906716847"></iframe>
 </div>

CSS:

.iframe-fb-container {
    text-align: center;
    width:400px;
    height:700px;
    display:inline-block;
}

.iframe-fb {
    width: 400px;
    height: 700px;
    overflow: hidden;
}

I hope this answer will help someone in the future :)

Weft

but this one doesn't solve the responsive case. – Pontianak

@Pontianak there is no way to solve this, Facebook returns a maximum width of the Iframe. – Weft

Answer 6

Because _2p3a and uiScaledImageContainer _2zfr are taking width: 450px; that's why facebook iframe not showing correctly.

Faye

this is correct, i dont think it can be done due to fixed width div _2p3a inside the iframe – Eidolon

Answer 7

You can always zoom iframe with scale:

iframe {
    transform: scale(1.3)
}

Uvula

Answer 8

Please give the iframe width of 100%. :)

iframe{
  width: 100% !important  //important if not working without it..
}

Nevels

will not work, as there are elements inside the iframe with fixed width that cannot be changed – Eidolon