Ein YouTube-Embed mit fester Breite und Höhe sieht auf dem Bildschirm gut aus, auf dem du ihn gebaut hast, und wirkt auf jedem anderen unpassend. So machst du ihn wirklich responsiv.
Die Padding-Bottom-Technik
Die klassische Lösung platziert das Iframe in einem Container mit einem prozentbasierten Padding-Bottom statt einer festen Höhe:
<div style="position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden;">n <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>n</div>Der Wert 56,25 % ergibt sich aus 9 geteilt durch 16, dem Standard-Seitenverhältnis von Video. Für vertikale Shorts-Videos verwendest du stattdessen 177,78 % (16 geteilt durch 9).
Eine modernere Alternative
Aktuelles CSS unterstützt auch die Eigenschaft aspect-ratio direkt, was auf unterstützenden Browsern kürzer ist:
<div style="width:100%;aspect-ratio:16/9;">n <iframe src="..." style="width:100%;height:100%;border:0;" allowfullscreen></iframe>n</div>Selbst testen
Verändere die Breite deines Browserfensters, während der Embed sichtbar ist, und prüfe, ob der Player sauber mitskaliert, ohne schwarze Balken oder Verzerrung.
Ohne manuelles CSS
Unser Embed-Code-Generator erzeugt automatisch einen korrekt proportionierten responsiven Wrapper, inklusive der 9:16-Version für Shorts.