Einbetten von Facebook-Post auf responsive Website

Question

Ich möchte einige Facebook-Posts (Bilder) auf meiner Website einbetten, die reaktionsschnell sein soll. Ich verwende Bootstrap als Hauptrahmen für alles und es ist sehr einfach, eine typische Bildempfindlichkeit zu erhalten.

Leider mit Facebook-Posts sind das iframe Objekte und sie wollen nicht so schön skalieren.

Für meine Tests, die ich dieses iframe bin mit:

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

Mein Problem ist, dass, wenn ich die Größe des Fensters am Wechsel ich manchmal ganze Post und andere Zeit nur obere Hälfte davon sehen kann. Nun, genauer gesagt, ändert sich allmählich zwischen diesen beiden Werten. Gut ist, dass es nie zu breit ist, aber es ist nicht Höhe genug, um ganz anzuzeigen.

Ein weiteres Problem ist, dass es den Text darunter überlagert, und nur wenn ich einen festen Wert für iframe_div ich bin in der Lage, es zu sehen, aber dann ist es nicht responsive Design.

Hat es jemand geschafft, Facebook Post in responsive Design-Seite einzubetten?

Answer 1

Sie haben die Container von iframe, um Stil dieses versuchen:

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

Sie müssen auch Stil iframe wie:

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

Sie Polsterung für Ihren Beitrag anpassen können.

Answer 2

Ersetzen dieses Stück am Ende:

&width=500

für diesen

&width=auto

und style = "width: 100%"

es ist alles