Kleine Sektflaschen Hochzeit
Eine automatische Höhenanpassung wie bei Bildern height:auto ist nicht möglich. Youtube Video 100% Breite zum Bildschirm / Höhe ermitteln
Das Seitenverhältnis des Videos ist 560 x 315
315/560 =
0, 562;
0, 562 * 100 = 56;
Die Höhe ist 56% zur Breite, der Wert vw ist die Bildschirmbreite
width und height Attribute müssen aus html entfernt werden
width="560" height="315"
body{margin: 0;}
iframe{
display: block;
width: 100vw; height: 56vw;}
Youtube-Video / Iframe 100% Breite zum Elternelement / Höhe ermitteln
Für das folgende Beispiel muss man das prozentuale Höhe zur Breite des Videos ausrechnen. Zum Beispiel, wenn das Seitenverhältnis des Videos 560 x 315 ist
0, 562 * 100 = 56, 2;
Die Höhe ist ungefähr 56% zur Breite
Diese porzentuale Höhe wird dem padding-bottom des #iframe-container Elements zugewiesen. Css bild größe 1. Man beachte die Verschachtelung in 3 Stufen: main, #iframe-container, iframe
main{
max-width: 800px;
margin: auto;
border: 1px solid #000;}
#iframe-container {
position: relative;
padding-bottom: 56%;
overflow: hidden;}
#iframe-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;}