In diesem kleinen Tutorial, zeige ich, wie man mit ein bisschen CSS seine YouTube Videos im 16:9 Format auf volle Breite bringt, ohne, dass die Höhe darunter leidet.
YouTube iFrame Anpassen
Für unseren YouTube iFrame müssen wir noch einen Container hinzufügen – im iFrame selbst vergeben wir noch eine Klasse. Die Höhe und Breite vom Video habe ich entfernt. Das sollte dann so aussehen:
<div class="embedvideo">
<iframe class="ytvideo" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>Den Namen für den Container könnt Ihr selbst auswählen. Wichtig ist, dass Ihr das CSS aber dann auch umbenennt!
CSS Regeln erstellen
Nun fügt Ihr diese beiden CSS Regeln hinzu:
.embedvideo {
position: relative;
width: 100%;
padding-bottom: 56.25%;
}
.ytvideo {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}Mit dem Padding-Bottom erhalten wir das 16:9 Verhalten – 56,25% ist nämlich genau der Equivalent zur Höhe des Videos – egal wie breit das Video ist.
Quelle: Ankursheel.com