Een YouTube-embed met vaste breedte en hoogte ziet er goed uit op het scherm waarop je hem hebt gebouwd, en breekt op elk ander scherm. Zo maak je hem wél responsive.
De padding-bottom-techniek
De klassieke oplossing plaatst de iframe in een container met een percentagegebaseerde padding-bottom in plaats van een vaste hoogte:
<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>Het getal 56,25% komt van 9 gedeeld door 16, de standaard beeldverhouding van video. Voor verticale Shorts-video’s gebruik je 177,78% (16 gedeeld door 9) in plaats daarvan.
Een moderner alternatief
Huidige CSS ondersteunt ook de eigenschap aspect-ratio rechtstreeks, wat korter is op browsers die dit ondersteunen:
<div style="width:100%;aspect-ratio:16/9;">n <iframe src="..." style="width:100%;height:100%;border:0;" allowfullscreen></iframe>n</div>Zelf testen
Maak je browservenster smaller en breder terwijl de embed zichtbaar is, en controleer of de speler soepel meeschaalt zonder zwarte balken of vervorming.
Zonder handmatige CSS
Onze embed code generator genereert automatisch een correct proportionele responsive wrapper, inclusief de 9:16-versie voor Shorts.