Was ist Responsive Design?

Responsive Design bedeutet, dass sich das Layout einer Webseite an den Bildschirm anpasst, auf dem sie betrachtet wird, von einem kleinen Smartphone bis zu einem großen Desktop-Monitor, statt eine feste Größe zu behalten. Auf Video angewendet bedeutet das, dass der Player mit seinem Container skaliert, statt immer bei einer festen Pixelbreite und -höhe zu rendern.

Die Padding-Bottom-Technik

Der gängigste Weg, ein Embed responsiv zu machen, ist, das Iframe in einen Container mit einem prozentbasierten padding-bottom einzupacken (56,25% für 16:9-Video) und das Iframe darin absolut auf 100% Breite und Höhe zu positionieren. Das hält das Seitenverhältnis bei jeder Containerbreite korrekt.

Eine neuere Alternative

Modernes CSS unterstützt auch direkt die aspect-ratio-Eigenschaft, die ein ähnliches Ergebnis mit weniger Markup in Browsern erzielt, die sie unterstützen. Siehe die vollständige Anleitung zu responsiven Embeds für funktionierende Beispiele beider Ansätze.

Die zwei wichtigsten Techniken für responsives Video

Responsive Videogrößen werden im Allgemeinen auf eine von zwei Arten erreicht. Die ältere, breiter kompatible Technik packt das Iframe in einen Container mit einem prozentbasierten padding-bottom (56,25% für 16:9-Video) kombiniert mit absoluter Positionierung, ein Trick, der zuverlässig funktioniert, seit responsives Design vor über einem Jahrzehnt üblich wurde. Die neuere Technik nutzt die CSS-Eigenschaft aspect-ratio direkt am Container, was kürzer zu schreiben und leichter zu lesen ist, auf Kosten der Abhängigkeit von einer CSS-Funktion, die in manchen deutlich älteren Browsern nicht unterstützt wird.

Ein praktisches Beispiel mit beiden Techniken

<!-- Padding-Bottom-Technik -->
<div style="position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden;">
  <iframe src="..." style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;"></iframe>
</div>

<!-- aspect-ratio-Technik -->
<div style="width:100%;aspect-ratio:16/9;">
  <iframe src="..." style="width:100%;height:100%;border:0;"></iframe>
</div>

Beide erzielen in modernen Browsern dasselbe visuelle Ergebnis; die Wahl hängt vor allem davon ab, wie viel Unterstützung für ältere Browser dein Publikum benötigt.

Responsive Design versus Einbetten mit fester Größe

Ein Embed mit fester Größe, mit wörtlichen width- und height-Attributen, ist einfacher zu schreiben, funktioniert aber nicht mehr, sobald die umgebende Seite auf einem Bildschirm betrachtet wird, der schmaler als diese feste Breite ist, wobei entweder das Layout überläuft oder horizontales Scrollen nötig wird. Responsive Design tauscht eine kleine zusätzliche Komplexität beim Aufsetzen gegen ein Embed, das über die gesamte Bandbreite der Bildschirmgrößen korrekt funktioniert, die Besucher tatsächlich nutzen, weshalb es der empfohlene Standard für praktisch alle modernen Websites ist.

Das Testen über eine echte Bandbreite an Gerätebreiten, nicht nur das leichte Verändern der Größe eines Desktop-Browserfensters, bleibt der zuverlässigste Weg zu bestätigen, dass ein responsives Embed tatsächlich für die gesamte Bandbreite der Besucher korrekt funktioniert, die eine typische Website erhält, von kleinen Smartphones bis zu großen externen Monitoren.

Häufig gestellte Fragen