Vad är en inbäddningskod?

En inbäddningskod är ett kort stycke HTML som en webbplatsägare klistrar in på en sida så att en YouTube-video spelas upp där direkt, istället för att bara vara nåbar via en länk. YouTube genererar den som ett <iframe>-element som pekar på en special-URL /embed/ för videon.

Vad en inbäddningskod innehåller

Den innehåller som minst en kall-URL med video-ID, en bredd och höjd (eller ett responsivt omslag istället) och ett title-attribut för tillgänglighet. Valfria parametrar styr autouppspelning, starttid, synlighet för kontroller och mer.

Hur man får en

Du kan kopiera YouTubes egen version från delningspanelen under en video, eller använda inbäddningsgeneratorn på den har webbplatsen för att lägga till responsiv storlek, integritetsläge, starttider och andra alternativ som YouTubes standardpanel inte erbjuder tillsammans.

En närmare titt på hur en inbäddningskod byggs

En inbäddningskod är inte en enda fäst sträng, den byggs upp av några utbytbara delar. Domänen (youtube.com eller det integritetsvänliga youtube-nocookie.com) avgör cookie-beteendet. Sökvägen har antingen ett enskilt video-ID eller, för en spellista, sökvägen videoseries med en list-parameter. Frågeparametrar som start, autoplay och controls står efter ett frågetecken och ändrar uppspelningen. Och den omgivande markupen, antingen fasta width/height-attribut eller en responsiv omslags-div, avgör hur spelaren storleksanpassas på sidan. Att första dessa separata delar gör det mycket lättare att läsa, och redigera för hand, en inbäddningskod du inte skapat själv.

Ett praktiskt exempel

Antag att du vill visa en produktdemovideo på en landningssida, integritetsvänligt, med start 15 sekunder in för att hoppa över en intro, utan autouppspelning. Den resulterande inbäddningskoden kombinerar en youtube-nocookie.com-domain, en start=15-parameter och ett responsivt omslag:

<div style="position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden;">
  <iframe src="https://www.youtube-nocookie.com/embed/VIDEO_ID?start=15" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" title="Product demo" allowfullscreen loading="lazy"></iframe>
</div>

Varje del av det utdraget motsvarar direkt ett val: domänen för integritet, start=15 för hoppet, och omslaget för responsiv storlek.

Inbäddningskod jämfört med en vanlig länk

Det är värt att vara tydlig med vad en inbäddningskod inte är. En vanlig YouTube-lank (en watch- eller youtu.be-URL) är avsedd för delning och klick; inklistrad som ren text på en sida ligger den bara där som en URL, eller konverteras automatiskt till en inbäddning av plattformar som WordPress som stödjer oEmbed. En inbäddningskod är däremot explicit HTML som du styr direkt, vilket ger dig storlek-, integritets- och uppspelningsalternativ som en vanlig länk inte exponerar. Relaterade begrepp värt att första tillsammans med detta är elementet iframe som koden bygger på, samt skillnaden mellan inbaddnings-URL och visnings-URL.

Vanliga misstag vid manuell redigering

Det vanligaste misstaget är att glömma bort att stänga iframe-taggen, eller att lämna kvar gamla, hårdkodade width- och height-varden bredvid en responsiv behållare, vilket ger dubbel skalning och en förvrängd spelare. Ett annat vanligt problem är att klistra in en visnings-URL istället för en inbaddnings-URL, vilket ofta resulterar i ett tomt fält istället för en fungerande video. Kontrollera alltid att domänen är youtube.com eller youtube-nocookie.com och att sökvägen börjar med /embed/ innan du går vidare till frågeparametrarna.

Testa koden före publicering

Innan du klistrar in inbäddningskoden på målssidan är det värt att testa den i en enkel HTML-fil lokalt eller i ett verktyg som CodePen, för att kontrollera att spelaren laddas korrekt och att den responsiva behållaren beter sig som förväntat vid olika skärmbredder. Detta steg hjälper dig att upptäcka felskrivningar i URL:en eller felaktiga parametrar innan de när den skärpa sidan och särpa besökare.

Vanliga frågor