Die in der Überschrift angedeutete Anforderung kommt mir unter allem bei eingebetteten Videos unter. Daher bezieht sich das Beispiel auf diesen Anwendungsfall, lässt sich aber problemlos auf andere Anwendungen – z.B. im CMS/LMS hochgeladene Videos – ü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 Standardgröße, die z.B. auf YouTube zum Einbetten angeboten wird, ist 560px x 315px. Der angebotene Code sieht bzgl. der Größe 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ängen kann:

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 🙁

Lösung: 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 (da das Video später mit einer absolute Position in diesen Wrapper eingepflanzt wird). Die Höhe regeln wir statt über height über ein padding-bottom. Denn prozentuale padding-top- und padding-bottom-Angaben beziehen sich auf die Breite des entsprechenden 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%). Das CSS für die Klassen "videowrapper16-9" bzw. "videowrapper4-3" sehen dann so aus:

.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. Alternativ kann man die Angaben im Copy-Code drin lassen und den Style für .videowrapper iframe mit entsprechenden !important Angaben unüberschreibbar machen:

<div class="videowrapper16-9">
  <iframe src="..." 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.