Ab und zu kommt man in die Situation, dass ein YouTube-Video in eine Webseite eingebettet werden muss. YouTube bringt systembedingt schon dynamische Einstellungen wie Breite und Höhe mit, jedoch funtkioniert dies nicht 100%ig responsive.
Die Lösung ist einfach:
1) Der YouTube iframe wird in einen DIV-Container gesteckt.
<div class="youtube-responsive">
//Hier der YouTube iframe
</div>
2) Den neuen DIV-Container passen wir entsprechend an. (56.25% entspricht dem Verhältnis von 16 zu 9, d.h. die Höhe ist 0px + 56.25% im Verhältnis zur Breite)
.youtube-responsive {
position: relative;
padding-bottom: 56.25%;
padding-top: 0px;
height: 0;
overflow: hidden;
}
3) Und schließlich überschreiben wir die Maße des iFrames.
.youtube-responsive iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
