Embedding facebook post on responsive website

Question

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?

Solution 1

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.

Solution 2

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