At indlejre en YouTube video lyder enkelt: kopier et link, indsæt noget kode, færdig. Men der er stor forskel på en indlejring, der bare virker, og en der er hurtig, responsiv, privatlivsvenlig og korrekt tilpasset til enhver skærm. Denne guide dækker det hele på ét sted.
Hvad “embedding” egentlig betyder
At indlejre en video betyder at vise den direkte på din egen webside gennem et <iframe>, i stedet for blot at linke ud til YouTube. YouTube genererer en særlig embed URL for hver video (i formen youtube.com/embed/VIDEO_ID), og det er den URL, der indsættes i iframe’ets src attribut. Selve den synlige YouTube.com side, med kommentarer og anbefalinger, kan ikke rammes ind på denne måde; kun den dedikerede embed URL er bygget til det.
Anatomien af en embed kode
En grundlæggende indlejring ser sådan ud:
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" title="YouTube video player" frameborder="0" allowfullscreen></iframe>Hver del betyder noget. Width og height angiver en fast pixelstørrelse, hvilket virker, men ikke tilpasser sig forskellige skærmstørrelser. Src URL’en bestemmer hvilken video der afspilles, og hvilket domæne der håndterer det (en detalje der har betydning for privatlivet, som vi kommer ind på senere). Title attributten er ikke pynt: skærmlæsere læser den op, så en generisk eller manglende titel er et reelt tilgængelighedsproblem. Allowfullscreen giver besøgende mulighed for at udvide afspilleren, hvilket de fleste forventer af enhver indlejret video.
Sådan gøres den responsiv
Faste pixeldimensioner ser fine ud på den skærm, du testede på, og går i stykker på alle andre skærmstørrelser. En responsiv indlejring pakker i stedet iframe’et ind i en beholder, der bevarer det korrekte billedformat uanset bredde:
<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>Tallet 56,25% er simpelthen forholdet mellem højde og bredde for en 16:9 video udtrykt i procent (9 ÷ 16 = 0,5625). Til en lodret Shorts video i format 9:16 er det tilsvarende tal 177,78% (16 ÷ 9). Dette “padding-bottom trick” har virket pålideligt på tværs af browsere i over ti år, hvilket er grunden til, at det stadig er den mest almindelige metode, selvom moderne CSS’s aspect-ratio egenskab er et gyldigt og enklere alternativ i browsere, der understøtter den.
Privatliv: youtube.com kontra youtube-nocookie.com
YouTube tilbyder to domæner til indlejring. Det almindelige youtube.com domæne opfører sig som resten af YouTube og kan sætte sporingscookies, så snart siden indlæses. Domænet youtube-nocookie.com er funktionelt identisk, men undgår at sætte disse cookies, før en besøgende rent faktisk interagerer med afspilleren, hvilket er grunden til, at det er den anbefalede standard for GDPR-bevidste sider. At skifte mellem dem er lige så enkelt som at ændre domænet i embed URL’en; alt andet ved indlejringen forbliver det samme.
Styring af afspilning
Embed URL’en accepterer en række query parametre, der ændrer, hvordan afspilleren opfører sig:
- start og end (i sekunder) beskærer afspilningen til et bestemt tidsrum.
- autoplay=1 starter videoen med det samme, selvom browsere generelt kræver mute=1 sammen med den, ellers blokeres autoplay.
- loop=1, kombineret med en tilsvarende playlist parameter sat til samme video ID, afspiller videoen kontinuerligt.
- controls=0 skjuler afspillerens kontrolbjælke, nyttigt til baggrundsagtig video.
- rel=0 begrænser forslag til relaterede videoer efter endt afspilning til videoer fra samme kanal.
For den fulde liste med eksempler, se vores iframe parameter reference.
Ydeevne: lad ikke indlejringer sinke din side
Et YouTube iframe er et forholdsvis tungt element at indlæse: det henter afspillerens egne scripts og et forhåndsvisningsbillede, endnu før nogen trykker afspil. På en side med flere indlejringer kan det mærkbart bremse den indledende sideindlæsning, hvis alle indlæses med det samme. To løsninger håndterer dette godt. For det første kan du tilføje den native loading="lazy" attribut til iframe’et, så browsere udskyder indlæsningen, indtil det ruller tæt på det synlige område. For det andet, på sider med mange videoer, kan du overveje et “klik-for-at-indlæse” mønster: vis først et let miniaturebillede, og indsæt kun det rigtige iframe, når en besøgende klikker på det.
Særlige formater: Shorts og afspilningslister
Shorts indlejres teknisk set på nøjagtig samme måde som almindelige videoer, men kræver en 9:16 responsiv beholder i stedet for 16:9 for at undgå sorte bjælker omkring det lodrette billede. Afspilningslister bruger en helt anden embed sti, /embed/videoseries, kombineret med en list parameter sat til afspilningslistens ID, og viser næste/forrige knapper, der bevæger sig gennem hver video i listen.
Hvor koden egentlig skal placeres
Når du har din embed kode, skal den placeres et sted, hvor din sides HTML kan redigeres direkte: en Custom HTML blok i WordPress’ blokredigering, en rich-text eller custom liquid sektion i Shopify, et embed widget i Wix, eller direkte ind i markup’en på en håndkodet side. Vi gennemgår de præcise trin for de mest almindelige platforme i separate guides til WordPress, Shopify og Wix.
Byg den uden at skrive kode
Alt det ovenstående (responsiv indpakning, det privatlivsvenlige domæne, start- og sluttidspunkter, autoplay, loop, skjulte kontroller, Shorts format og afspilningslistetilstand) håndteres automatisk af vores gratis embed kode generator. Indsæt et link, slå de nødvendige indstillinger til, og kopiér den færdige kode. Den kører fuldstændig i din browser, så intet om den video, du indlejrer, sendes til eller gemmes på vores servere.
Almindelige fejl du bør undgå
- At indsætte watch URL’en (youtube.com/watch?v=…) direkte i et iframes src, i stedet for først at konvertere den til /embed/ formatet.
- At sætte autoplay=1 uden mute=1, hvilket de fleste browsere blot vil ignorere.
- At glemme en beskrivende title attribut, hvilket skader tilgængeligheden.
- At bruge fast width og height på en side, der også skal fungere godt på mobil.
- At indlæse mange indlejringer samtidig på én side uden lazy-loading, hvilket trækker sidehastigheden ned.
Med det grundlæggende på plads har du alt, hvad der skal til for at indlejre YouTube video korrekt: hurtigt, responsivt, tilgængeligt og privatlivsbevidst, uanset om du bygger koden i hånden eller genererer den med et par klik.