Videowrapper: Box mit festem Seitenverhältnis bei variabler Breite?

Die in der Überschrift angedeutete Anforderung kommt mir vor allem bei der Arbeit mit eingebetteten Videos unter. Daher bezieht sich das Beispiel auf diesen Anwendungsfall, lässt sich aber problemlos auf andere Anwendungen übertragen.

Problem: iframes mit fester Breite 🙁

Die „Teilen“-Funktion der gängigen Videoportale bietet auch immer die Möglichkeit an, die Videos in eine eigene Webseite einzubetten. Das ist toll, hat aber für den Designer einige Nachteile: Die Videos werden mit festen Größenangaben ausgeliefert. Die kleinste Größe, die z.B. auf YouTube zum Einbetten angeboten wird, ist 560px x 315px. Der angebotene Code sieht so aus:

<iframe width="560px" height="315px" ...>

Der hat natürlich den Nachteil, dass bei kleinerer Seitendarstellung bzw. schmalerem Viewport das Video rechts aus dem Design heraushängt:

Beispielhafte Breite des Elternelements: 420px

Beispielhafter Videocontainer (560 * 315px)

Gerade bei Designs für mobile Endgeräte mit unterschiedlichen Viewport-Maßen ist eine feste Breite immer etwas dösig zu verarbeiten.

Darstellung mit 100%iger Breite

Da denkt sich der Hobby-Webdesigner: Soll sich doch das Video an die zur Verfügung stehenden Breite anpassen – und vergibt statt der px-Angabe eine Breite und eine Höhe in %:

... width="100%" height="100%" ...

bzw.

... width="100%" height="auto" ...

Nun ja. Die Breite passt, reagiert auch „responsive“ auf verschiedene Viewports und/oder Größenveränderungen des Browserfensters. Allerdings passt die Höhe leider überhaupt nicht 🙁

Der „16:9- oder 4:3-Videowrapper“

Daher müssen wir uns einen „Videowrapper“ basteln. Dieser wird mit 100% Breite und einer Höhe von 0px definiert. Die Positionsangabe „relative“ darf nicht fehlen. Die Höhe regeln wir statt über height über ein padding-bottom. Denn prozentuale padding-top- und padding-bottom-Angaben beziehen sich – warum auch immer – auf die Breite eines Elements.

Für ein angestrebtes Seitenverhältnis von 16:9 und einer Breite von 100% muss der nachfolgende Content also um 56,25% der Breite nach unten wandern (100% : 16 * 9 = 56,25%), für ein Seitenverhältnis von 4:3 entsprechend 75% (100% : 4 * 3 = 75%).

.videowrapper16-9 {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;    /* 100% : 16 * 9 = 56,25% */
  position: relative;
}

bzw.

.videowrapper4-3 {
  width: 100%;
  height: 0;
  padding-bottom: 75%;    /* 100% : 4 * 3 = 75% */
  position: relative;
}

Dann muss der Video-iframe entsprechend eingepasst werden – mit absoluter Position, oberem und linkem Abstand von 0 und einer Breite und Höhe von 100%. Damit füllt er den Videowrapper komplett aus und hält das durch ihn vorgegebene Seitenverhältnis ein:

.videowrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Der dazugeörige HTML-Code kann dann auf die Größenangaben des iframes komplett verzichten:

<div class="videowrapper16-9">
  <iframe src="https://www.youtube-nocookie.com/embed/2dye7LIUK7A?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

Das Ergebnis ist ein im Seitenverhältnis 16:9 angezeigtes Video. Der Videowrapper reagiert auf Viewport und Seitenbreite, wobei das entsprechende Seitenverhältnis beibehalten wird:

Wenn alles so einfach wär.

2 Gedanken zu „Videowrapper: Box mit festem Seitenverhältnis bei variabler Breite?&8220;

Schreibe einen Kommentar

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