Von Haus aus wird ein iframe wie folgt eingebunden:
<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.