iFrames/Youtube RESPONSIVE einbinden

Der YouTube-iFrame soll folgendermaßen eingebunden werden:

HTML:

<iframe width="560" height="315" src="https://www.youtube.com/embed/9T7eSyo7DRU" frameborder="0" allowfullscreen></iframe>

Die Breite des iFrame überschreibt man durch CSS wie auch bei Responsive Images:

CSS:

img, iframe { max-width: 100%; }

Die Breite passt sich immer dem Container an. Die Höhe wird leider nicht automatisch angepasst, im Beispiel bleibt die Höhe also bei 315 px. Die Regel height: auto; hat hier leider keinen Einfluss auf unseren iFrame. Das Problem bleib die relationale Höhenanpassung des iFrames, wenn sich die Breite verändert. Für das reponsive iFrame-Video behelfen wir uns mit einem bekannten Trick. Den iFrame umschließen wir mit einem Container-DIV und erweitern den Container mit ‚padding-bottom‘ durch die prozentuale Höhe des Seitenverhältnis vom iFrames.

Beispiel:

HTML:

<div class="embed-container"> <iframe width="560" height="315" src="https://www.youtube.com/embed/9T7eSyo7DRU" frameborder="0" allowfullscreen></iframe> </div>

CSS:

.embed-container { position: relative; padding-bottom: 56.25%; /* ratio 16x9 */ height: 0; overflow: hidden; width: 100%; height: auto; }
.embed-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.embed-container.ratio4x3 { padding-bottom: 75%; } /* ratio 4x3 */

Jetzt wird die Video-Containerhöhe immer relational an die Breite angepasst. Je nach Seitenverhältnis kann man auch weitere Klassen im .embed-container verwenden, z.B. .ratio4x3 für ein Seitenverhältnis 4:3.

Quick & Dirty: Inline-Beispiel

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; width: 100%; height: auto;"><iframe  width="560" height="315" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;max-width: 100%;" src="https://www.youtube.com/embed/0Nb_RD-w-zQ?rel=0" frameborder="0" allowfullscreen></iframe></div>

 style="width: 560px; max-width: 100%;"