En YouTube-inbäddning med fast bredd och höjd ser bra ut på skärmen du byggde den på och går sönder på alla andra. Så här får du den att skala korrekt i stället.
Problemet med fast storlek
YouTubes standardkod för inbäddning sätter en bokstavlig pixelbredd och pixelhöjd, till exempel 560 gånger 315. På en stor skrivbordsskärm kan det se litet ut; på en smal telefonskärm kan det svämma över sidan helt, vilket tvingar en besökare att skrolla i sidled. Ingetdera är en bra upplevelse.
Padding-bottom-tekniken
Standardlösningen omsluter iframen i en behållare vars storlek sätts med en procentbaserad padding-bottom i stället för en fast höjd, och placerar iframen absolut för att fylla den behållaren:
<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 % kommer från att dela 9 med 16, standardförhållandet för video. Eftersom behållarens bredd sätts till 100 % av sin förälder, och dess höjd beräknas som en procentandel av den bredden, behåller rutan en perfekt 16:9-form oavsett hur bred den omgivande sidan är.
Shorts-versionen
Vertikala videor, som YouTube Shorts, använder det omvända förhållandet. Byt padding-bottom till 177,78 % (16 delat med 9) så håller samma teknik en korrekt 9:16-form i stället.
Ett enklare modernt alternativ
Modern CSS stöder egenskapen aspect-ratio direkt, vilket kan ersätta padding-bottom-tricket i webbläsare som stöder den:
<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>Den är kortare och lättare att läsa, men padding-bottom-metoden förblir det säkrare standardvalet om du behöver stödja äldre webbläsare.
Att testa den ordentligt
Ändra storlek på ditt webbläsarfönster smalare och bredare medan inbäddningen visas (eller använd webbläsarens enhetsverktyg för att simulera en telefon) och bekräfta att spelaren skalas mjukt utan svarta ränder, utan överflöde och utan att sträckas ut. Det är exakt den typen av kontroll som är värd att göra innan du publicerar en sida med en inbäddad video.
Hoppa över den manuella CSS:en
Vår embed-kodgenerator genererar automatiskt en korrekt proportionerad responsiv wrapper, inklusive 9:16-versionen för Shorts, så du behöver inte komma ihåg dessa procentsatser själv.