sebap123 sebap123 - 3 months ago 20
CSS Question

Embedding facebook post on responsive website

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?

Answer

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.

Comments