Flexible iFrames: So bindet man ein YouTube-Video responsiv ein

Der Standardcode von YouTube wird erweitert, um das Video responsive zu machen

Mit iFrames kann man ein Browserfenster im Browserfenster anzeigen. Einen solchen Codeschnipsel erhält man, wenn man ein YouTube-Video auf der eigenen Website einbinden möchte. Dieser Code hat feste Höhen- und Breitenangaben, meist im Verhältnis 16:9. Von Haus aus passt sich dieser iFrame nicht an das jeweilige Endgerät an.

Ob sich ein iFrame responsiv verhält, hängt vom Inhalt ab, dieser muss auch responsiv sein. Die Breite kann man leicht mit max-width: 100%; anpassen, so wie man es auch bei Bildern macht. Doch bei der Höhe geht es leider nicht so einfach: Damit das Video bei kleineren Bildschirmen nicht verzerrt wird, wendet man den padding-bottom Trick an:

Den Code für das einzubettende Video erhält man, wenn man auf YouTube unter dem Video auf „Teilen“ und danach auf „Einbetten“ klickt. Den vorausgewählten Code kopiert man nun und fügt ihn in das HTML-Dokument ein.

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

Dieser „Standardcode“ erfährt nun ein paar Ergänzungen. Zunächst kommt im Stylesheet die anfangs erwähnte Anweisung hinzu, um die Breite flexibel zu machen:

iframe {
max-width: 100%;
}

Beim Verkleinern passt sich das Video zwar in der Breite an, aber nicht in der Höhe. Es entsteht ein Leerraum unterhalb des Videos. Mit der Angabe height: auto; kann man bei einem iFrame nichts ausrichten. Daher kommt nun der padding-bottom-Trick zum Einsatz. Hierfür wird der iFrame zunächst mit einem div-Element umschlossen, dass eine id oder Klasse erhält:

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

Diesem Element wird u. a. die Höhe des iFrame-Seitenverhältnisses in Prozent als padding-bottom zugewiesen:

.iframe-container {
position: relative;
height: 0;
padding-bottom: 56.25%;
width: 100%;
}

.iframe-container > iframe {
position: absolute;
width: 100%;
height: 100%;
top: 0;
margin: 0;
padding: 0;
}

Dieser padding-bottom Wert lässt sich mit einem Dreisatz errechnen. Hierzu zieht man das Seitenverhältnis des Videos heran, in diesem Falle 16:9, und rechnet: 9 x 100% / 16, das ergibt 56,25%. Hat das Video ein Seitenverhältnis von 4:3 kommt man auf 75%. Somit wird die Höhe des Videos immer im richtigen Verhältnis zur Breite angepasst. Solange die Videos eine feste Breite und Höhe haben ist das eine gute Möglichkeit, man kommt ohne JavaScript aus.