En YouTube-indlejring med fast bredde og højde ser fin ud på den skærm, du byggede den på, og forkert ud på alle andre. Sådan gør du den reelt responsiv.
Padding-bottom-teknikken
Den klassiske løsning placerer iframen i en beholder med en procentbaseret padding-bottom i stedet for en fast højde:
<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>Tallet 56,25 % kommer fra 9 divideret med 16, standardforholdet for video. Til lodrette Shorts-videoer bruger du i stedet 177,78 % (16 divideret med 9).
Et mere moderne alternativ
Nuværende CSS understøtter også egenskaben aspect-ratio direkte, kortere i browsere der understøtter den:
<div style="width:100%;aspect-ratio:16/9;">n <iframe src="..." style="width:100%;height:100%;border:0;" allowfullscreen></iframe>n</div>Test det selv
Gør browservinduet smallere og bredere, mens indlejringen er synlig, og tjek at afspilleren skalerer pænt uden sorte bjælker eller forvrængning.
Uden manuel CSS
Vores indlejringsgenerator opretter automatisk en korrekt proportioneret responsiv beholder, inklusive 9:16-versionen til Shorts.