En YouTube-inbäddning med fast bredd och höjd ser bra ut på skärmen du byggde den på, och blir fel på alla andra. Så här gör du den verkligt responsiv.
Padding-bottom-tekniken
Den klassiska lösningen placerar iframen i en behållare med en procentbaserad padding-bottom istället för en fast höjd:
<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>Siffran 56,25 % kommer från 9 delat med 16, standardformatet för video. För vertikala Shorts-videor använder du istället 177,78 % (16 delat med 9).
Ett modernare alternativ
Nuvarande CSS stöder även egenskapen aspect-ratio direkt, kortare i webbläsare som stöder den:
<div style="width:100%;aspect-ratio:16/9;">n <iframe src="..." style="width:100%;height:100%;border:0;" allowfullscreen></iframe>n</div>Testa själv
Gör webbläsarfönstret smalare och bredare medan inbäddningen syns, och kontrollera att spelaren skalar utan svarta fält eller förvrängning.
Utan manuell CSS
Vår inbäddningsgenerator skapar automatiskt en korrekt proportionerad responsiv behållare, inklusive 9:16-versionen för Shorts.