En YouTube indlejring med fast bredde og højde ser fin ud på den skærm, du byggede den på, og går i stykker på alle andre. Her er hvordan du i stedet får den til at skalere korrekt.
Problemet med fast størrelse
YouTubes standard embed kode angiver en bogstavelig pixelbredde og -højde, for eksempel 560 gange 315. På en stor computerskærm kan det se lille ud; på en smal telefonskærm kan det løbe helt uden for siden og tvinge den besøgende til at scrolle sidelæns. Ingen af delene er en god oplevelse.
Padding-bottom teknikken
Den gængse løsning pakker iframe’et ind i en beholder, hvis størrelse fastsættes med en procentbaseret padding-bottom i stedet for en fast højde, og placerer iframe’et absolut for at fylde denne beholder ud:
<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 fra at dividere 9 med 16, det standard billedformat for video. Fordi beholderens bredde er sat til 100% af sin forælder, og dens højde beregnes som en procent af den bredde, bevarer boksen et perfekt 16:9 format, uanset hvor bred den omgivende side er.
Shorts-versionen
Lodrette videoer, som YouTube Shorts, bruger det modsatte forhold. Skift padding-bottom til 177,78% (16 divideret med 9), så bevarer samme teknik i stedet et korrekt 9:16 format.
Et enklere moderne alternativ
Moderne CSS understøtter aspect-ratio egenskaben direkte, hvilket kan erstatte padding-bottom trikket i browsere, der understøtter 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 er kortere og lettere at læse, selvom padding-bottom metoden fortsat er det sikreste standardvalg, hvis du skal understøtte ældre browsere.
Test det ordentligt
Ændr størrelsen på dit browservindue smallere og bredere, mens indlejringen er på skærmen (eller brug browserens enhedspanel til at simulere en telefon), og bekræft, at afspilleren skalerer jævnt uden sorte bjælker, ingen overløb og ingen forvrængning. Det er præcis den slags tjek, det er værd at gøre, før du udgiver en side med indlejret video.
Slip for den manuelle CSS
Vores embed kode generator udskriver automatisk en korrekt proportioneret responsiv beholder, inklusive 9:16 versionen til Shorts, så du ikke selv skal huske disse procenttal.