Ein YouTube-Embed mit fester Breite und Höhe sieht auf dem Bildschirm, auf dem es gebaut wurde, gut aus und bricht auf jedem anderen. So skalierst du es stattdessen richtig.
Das Problem mit fester Größe
Der Standard-Embed-Code von YouTube legt eine feste Pixelbreite und -höhe fest, zum Beispiel 560 mal 315. Auf einem großen Desktop-Monitor kann das klein wirken; auf einem schmalen Handybildschirm kann es die Seite komplett überlaufen und den Besucher zum seitlichen Scrollen zwingen. Beides ist keine gute Erfahrung.
Die Padding-Bottom-Technik
Die Standardlösung umschließt das Iframe mit einem Container, dessen Größe über ein prozentuales padding-bottom statt einer festen Höhe festgelegt wird, und positioniert das Iframe absolut, sodass es diesen Container ausfüllt:
<div style="position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden;">
<iframe src="https://www.youtube-nocookie.com/embed/VIDEO_ID" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" allowfullscreen></iframe>
</div>Die 56,25 % ergeben sich aus 9 geteilt durch 16, dem üblichen Video-Seitenverhältnis. Da die Breite des Containers auf 100 % seines übergeordneten Elements gesetzt ist und seine Höhe als Prozentsatz dieser Breite berechnet wird, behält die Box unabhängig von der Breite der umgebenden Seite ein perfektes 16:9-Format.
Die Shorts-Variante
Vertikale Videos wie YouTube Shorts nutzen das umgekehrte Verhältnis. Ersetze das padding-bottom durch 177,78 % (16 geteilt durch 9), und dieselbe Technik behält stattdessen ein korrektes 9:16-Format bei.
Eine einfachere moderne Alternative
Aktuelles CSS unterstützt die Eigenschaft aspect-ratio direkt, die den Padding-Bottom-Trick in Browsern ersetzen kann, die sie unterstützen:
<div style="width:100%;aspect-ratio:16/9;">
<iframe src="https://www.youtube-nocookie.com/embed/VIDEO_ID" style="width:100%;height:100%;border:0;" allowfullscreen></iframe>
</div>Sie ist kürzer und leichter lesbar, wobei die Padding-Bottom-Methode die sicherere Standardwahl bleibt, wenn ältere Browser unterstützt werden müssen.
Richtig testen
Verändere die Breite deines Browserfensters bei angezeigtem Embed (oder nutze die Geräteleiste deines Browsers, um ein Smartphone zu simulieren) und bestätige, dass der Player sauber skaliert, ohne schwarze Balken, ohne Überlaufen und ohne Verzerrung. Genau diese Prüfung lohnt sich vor der Veröffentlichung jeder Seite mit eingebettetem Video.
Manuelles CSS überspringen
Unser Embed-Code-Generator gibt automatisch einen korrekt proportionierten responsiven Wrapper aus, einschließlich der 9:16-Variante für Shorts, sodass du dir diese Prozentwerte nicht merken musst.