YouTube Embed 16:9 Full Width Tutorial (CSS)


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


Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.