2021: responsive Videos und iframes

Im September 2016 habe ich einen Blogartikel verfasst mit dem Titel Responsive iframes und YouTube-Videos. Es ging darum, wie man ein Video so einbinden kann, dass es sich in einem responsiven Layout gut einfügt und somit größer bzw. kleiner wird, je nach Anforderung.

Der CSS-Code damals war… wie sage ich es freundlich… sehr originell. 😉 Er bestand aus relativer, aus absoluter Positionierung gepaart mit krummen Positionswerten. Also typischer Code aus der CSS-Alchemie-Werkstatt, wenn sich Nutzer selber behelfen müssen, weil die Browserhersteller noch im Schlafmodus sind.

Aber schauen wir uns mal kurz den alten Code an. Zuerst das HTML, dass sowohl dem alten als auch dem neuen Ansatz als Grundlage dient:

<div class="video-block" title="Kampf gegen ein Nazgûl im Westen von Gondor. Aufgenommen in Herr der Ringe Online.">
  <iframe width="530" height="298" src="https://www.youtube.com/embed/KdI7EQsmlJs" frameborder="0" allowfullscreen></iframe>
</div>

Der alte CSS-Code sah dann so aus:

.video-block {
  position: relative; 
  padding-bottom: 56.25%; /* 16:9 */
  height: 0; 
  overflow: hidden; 
  width: 100%; height: auto;}

.video-block iframe {
  position: absolute; 
  top: 0; left: 0; 
  width: 100%; height: 100%;}

Sehen kannst du diesem Code auch auf CodePen:

See the Pen Responsive iframes bzw. YouTube-Videos by Vlad (@vladimir-simovic) on CodePen.

Wie du aus den Code-Beispielen und dem CodePen gut erkennen kannst, hat der Code zwar gut funktioniert, aber er war alles andere als elegant.

2021: Der neue Ansatz

Nun sind wir jetzt knapp fünf Jahre später und die Browserhersteller haben nachgezogen. Seit diesem Jahr unterstützen alle wichtigen Browserhersteller die CSS-Eigenschaft aspect-ratio. Somit ist es jetzt möglich, den CSS-Code auf die folgenden wenigen Zeilen zu kürzen:

.video-block iframe {
  width: 100%; height: auto;
  max-width: 1280px; /* optional */
  aspect-ratio: 16/9;
}

Der Ansatz ist leicht zu verstehen und viele von euch, werden die erste Zeile auch von den responsiven Bildern kennen. Zuerst gibt es die Anweisung, dass das Element, die maximal mögliche Breite annehmen soll. Die Höhe soll sich automatisch anpassen.

Die zweite Zeile ist optional und nur dann notwendig, wenn du nicht weißt wie breit der Inhaltsbereich maximal werden kann und/oder wenn die Auflösung des Videos limitiert ist. Mit max-width sorgst du dafür du, dass das Video innerhalb seiner qualitativen Schranken bleibt.

Die letzte Zeile ist die wichtige und deswegen habe ich die hervorgehoben. Mit ihr sorgst du dafür, dass das Video sich immer im 16:9-Verhältnis ausbreitet und nicht abgeschnitten wird. Sehen kannst du das ganze auch auf CodePen.

See the Pen Responsive iframes bzw. YouTube-Videos by Vlad (@vladimir-simovic) on CodePen.

Und solche vermeintliche Kleinigkeiten sind es, die mich auch nach gut 21 Jahren immer noch an CSS faszinieren.

Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienst­leistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.

Verwandte Beiträge:

• Einfarbige Verläufe mit CSS
• Bessere Laune durch schlankeres Twitter
• CSS: Ausgefallene Formen mit Border-Radius
• Farbe der Emojis mit CSS ändern
• Wofür brauche ich CSS Media Queries?