5

I want to embed some Facebook posts (images) on my website, which is intended to be responsive. I am using bootstrap as a main frame for everything and it is very easy to get typical image responsiveness.

Unfortunately with Facebook posts those are iframe objects and they don't want to scale so nicely.

For my tests I am using this iframe:

<div class="iframe_div">    
<div>Title</div>
    <div>
    <iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FKickstarter%2Fphotos%2Fa.10152384621799885.1073741831.73182029884%2F10154511546454885%2F%3Ftype%3D3&width=500" style="border:none;overflow:hidden;width:100%;height:100%;position:absolute;left:0;" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
    </div>
    <div>Tekst</div>
</div>

My problem is that when I am changing the size of the window I can sometimes see whole post and other time only top half of it. Well, more precisely it is gradually changing between those two values. Good thing is that it is never too wide, but it is not height enough to display whole.

Another issue is that it overlays the text below it, and only if I'll set some fixed value for iframe_div I am able to see it, but then it is not responsive design.

Does anyone managed to embed facebook post in responsive design page?

sebap123
  • 2,541
  • 6
  • 45
  • 81

3 Answers3

18

Replace this piece at the end of src value:

&width=500

For this:

&width=auto

And put this attribute into iframe tag:

style="width: 100%"

Felipe Saldanha
  • 1,087
  • 8
  • 17
Jhoedram
  • 321
  • 2
  • 7
6

you have to style the container of iframe try this :

.post-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
}

you also need to style iframe like : 

position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;

you can customize padding for your post.

Hamonbatra
  • 178
  • 10
0

My iframe code

<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FFordIndia%2Fposts%2F4221333164585267&amp;show_text=true&amp;width=auto" width="500" height="660" style="border:none;overflow:hidden;width:100%;" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>

The issue is we set the width and height. For ex; Width=500 & height =600. This embed work without responsive issue, more than 500px. But below 500px width reduced, but height not reduced. We can't set height auto. So am trying to resolve that. We have posted more than 1000 embeds in our website, also all embeds not a same height because we include caption also. so it's not possible to responsive via CSS. So am choosing jQuery to resolve this. I need to set height same ration. Am creating below code for setup same ratio

<script>
$("iframe").each(function() {
   $(this).css("height", $(this).width()*$(this).attr('height')/$(this).attr('width'));
});
</script>

This code works as what i want. But there is am getting one more issue. The issue is caption height is automatically adjust for responsive. ex; in desktop caption have 3 lines, in mobile caption have 6 lines. so first 3 lines only shown. So am think to resolve any other ways. Am suggest to my team remove captions for all posts but it's take huge time to change 1000 posts. So am set the height for post height so caption automatically hide.

Finally below single line code only sort my issues

@media screen and (max-width:500px){
.single-post iframe{max-height:87vw}
}

You should vw if you use px we responsive break every px

sabithkumar
  • 362
  • 4
  • 16