Een YouTube embed met een vaste breedte en hoogte ziet er prima uit op het scherm waarop je hem hebt gebouwd en breekt op elk ander scherm. Hier lees je hoe je hem in plaats daarvan correct laat schalen.
Het probleem met vaste afmetingen
De standaard embed code van YouTube stelt een letterlijke breedte en hoogte in pixels in, bijvoorbeeld 560 bij 315. Op een groot bureaubladscherm kan dat klein ogen; op een smal telefoonscherm kan het de pagina volledig laten overlopen, waardoor een bezoeker zijwaarts moet scrollen. Geen van beide is een goede ervaring.
De padding-bottom techniek
De standaardoplossing wikkelt de iframe in een container waarvan het formaat wordt bepaald met een op percentage gebaseerde padding-bottom in plaats van een vaste hoogte, en positioneert de iframe absoluut zodat die de container vult:
<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>De 56,25% komt van 9 gedeeld door 16, de standaard beeldverhouding van video. Omdat de breedte van de container is ingesteld op 100% van zijn bovenliggend element, en de hoogte wordt berekend als een percentage van die breedte, houdt de box een perfecte 16:9 vorm aan ongeacht hoe breed de omringende pagina is.
De Shorts versie
Verticale video’s, zoals YouTube Shorts, gebruiken de omgekeerde verhouding. Verander de padding-bottom naar 177,78% (16 gedeeld door 9) en dezelfde techniek houdt in plaats daarvan een correcte 9:16 vorm aan.
Een eenvoudiger modern alternatief
Huidige CSS ondersteunt de aspect-ratio eigenschap rechtstreeks, die de padding-bottom truc kan vervangen in browsers die dit ondersteunen:
<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>Het is korter en makkelijker te lezen, al blijft de padding-bottom methode de veiligere standaard als je oudere browsers moet ondersteunen.
Het goed testen
Maak je browservenster smaller en breder terwijl de embed op het scherm staat (of gebruik het apparaatpaneel van je browser om een telefoon te simuleren) en controleer of de speler soepel schaalt zonder zwarte balken, zonder overloop en zonder vervorming. Dit is precies het soort controle dat de moeite waard is voordat je een pagina met een ingesloten video publiceert.
Sla de handmatige CSS over
Onze embed code generator geeft automatisch een correct proportioneerde responsive wrapper, inclusief de 9:16 versie voor Shorts, zodat je deze percentages zelf niet hoeft te onthouden.