Att bädda in en YouTube-video låter enkelt: kopiera en länk, klistra in lite kod, klart. Men det är en verklig skillnad mellan en inbäddning som bara fungerar och en som är snabb, responsiv, integritetsvänlig och korrekt anpassad på alla enheter. Den här guiden täcker allt detta på ett och samma ställe.
Vad “att bädda in” faktiskt innebär
Att bädda in en video innebär att visa den direkt på din egen webbsida via en <iframe>, i stället för att bara länka ut till YouTube. YouTube genererar en särskild inbäddnings-URL för varje video (i formatet youtube.com/embed/VIDEO_ID), och det är den URL:en som placeras i iframens src-attribut. Den vanliga YouTube.com-sidan, den med kommentarer och rekommendationer, kan inte visas på detta sätt; endast den särskilda inbäddnings-URL:en är byggd för det.
Anatomin i en inbäddningskod
En grundläggande inbäddning ser ut så här:
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" title="YouTube video player" frameborder="0" allowfullscreen></iframe>Varje del spelar roll. Width och height sätter en fast pixelstorlek, vilket fungerar men inte anpassar sig till olika skärmstorlekar. Src-URL:en avgör vilken video som spelas och vilken domän som hanterar den (en detalj som spelar roll för integriteten, se nedan). Title-attributet är inte bara dekorativt: skärmläsare läser upp det, så en generisk eller saknad titel är en verklig tillgänglighetsbrist. Allowfullscreen låter en besökare expandera spelaren, vilket de flesta förväntar sig av en inbäddad video.
Göra den responsiv
Fasta pixelmått ser bra ut på den skärm du testade på och går sönder på alla andra skärmstorlekar. En responsiv inbäddning omsluter i stället iframen i en behållare som bibehåller rätt bildförhållande vid alla bredder:
<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>Siffran 56,25 % är helt enkelt förhållandet höjd till bredd för video i 16:9 uttryckt i procent (9 ÷ 16 = 0,5625). För en vertikal Shorts-liknande video i 9:16 är motsvarande siffra 177,78 % (16 ÷ 9). Detta “padding-bottom-trick” har fungerat pålitligt i alla webbläsare i över ett decennium, vilket är varför det fortfarande är den vanligaste metoden, även om den moderna CSS-egenskapen aspect-ratio är ett giltigt, enklare alternativ i webbläsare som stöder den.
Integritet: youtube.com kontra youtube-nocookie.com
YouTube erbjuder två domäner för inbäddning. Standarddomänen youtube.com beter sig som resten av YouTube och kan sätta spårningskakor så fort sidan laddas. Domänen youtube-nocookie.com är funktionellt identisk men undviker att sätta dessa kakor tills en besökare faktiskt interagerar med spelaren, vilket är varför den rekommenderas som standard för GDPR-medvetna webbplatser. Att byta mellan dem är lika enkelt som att ändra domänen i inbäddnings-URL:en; allt annat i inbäddningen förblir detsamma.
Styra uppspelningen
Inbäddnings-URL:en accepterar en rad frågeparametrar som ändrar hur spelaren beter sig:
- start och end (i sekunder) trimmar uppspelningen till ett specifikt intervall.
- autoplay=1 startar videon direkt, även om webbläsare i regel kräver mute=1 tillsammans med den annars blockeras autoplay.
- loop=1, kombinerat med en matchande playlist-parameter satt till samma video-ID, spelar upp videon om och om igen.
- controls=0 döljer spelarens kontrollfält, användbart för videor som fungerar som bakgrund.
- rel=0 begränsar förslag på relaterade videor efter uppspelning till videor från samma kanal.
För den fullständiga listan med exempel, se vår referens över iframe-parametrar.
Prestanda: låt inte inbäddningar sakta ner din sida
En YouTube-iframe är ett relativt tungt element att ladda: den hämtar spelarens egna skript och en förhandsgranskningsbild redan innan någon trycker på play. På en sida med flera inbäddningar kan det att ladda alla direkt märkbart sakta ner den initiala sidladdningen. Två åtgärder hanterar detta bra. Först, lägg till det inbyggda attributet loading="lazy" på iframen, så att webbläsare skjuter upp laddningen tills den rullas nära synfältet. För det andra, för sidor med många videor, överväg ett “klicka för att ladda”-mönster: visa en lättviktig miniatyrbild först och infoga den riktiga iframen bara när en besökare klickar på den.
Specialformat: Shorts och spellistor
Shorts bäddas tekniskt in precis som vanliga videor, men behöver en 9:16 responsiv wrapper i stället för 16:9 för att undvika svarta ränder runt den vertikala ramen. Spellistor använder en helt annan inbäddningsväg, /embed/videoseries, kombinerad med en list-parameter satt till spellistans ID, och visar kontroller för nästa/föregående som går igenom varje video i spellistan.
Var koden faktiskt ska placeras
När du har din inbäddningskod behöver den placeras någonstans där din webbplats HTML kan redigeras direkt: ett Custom HTML-block i WordPress blockredigerare, en rich text- eller custom liquid-sektion i Shopify, ett inbäddningswidget i Wix, eller direkt i markupen på en handkodad webbplats. Vi går igenom de exakta stegen för de vanligaste plattformarna i separata guider för WordPress, Shopify och Wix.
Bygga det utan att skriva någon kod
Allt det ovanstående (responsiv wrapping, den integritetsvänliga domänen, start- och sluttider, autoplay, loop, dolda kontroller, Shorts-anpassning och spellistläge) hanteras automatiskt av vår gratis embed-kodgenerator. Klistra in en länk, växla de alternativ du behöver och kopiera den färdiga koden. Den körs helt i din webbläsare, så inget om videon du bäddar in skickas till eller lagras på våra servrar.
Vanliga misstag att undvika
- Att klistra in watch-URL:en (youtube.com/watch?v=…) direkt i en iframes src i stället för att först konvertera den till /embed/-formatet.
- Att sätta autoplay=1 utan mute=1, vilket de flesta webbläsare helt enkelt ignorerar.
- Att glömma ett beskrivande title-attribut, vilket försämrar tillgängligheten.
- Att använda fast width och height på en sida som också behöver fungera bra på mobil.
- Att ladda många inbäddningar samtidigt på en enda sida utan lazy-loading, vilket drar ner sidhastigheten.
Med dessa grunder på plats har du allt som behövs för att bädda in YouTube-video korrekt: snabbt, responsivt, tillgängligt och integritetsmedvetet, oavsett om du bygger koden för hand eller genererar den med några klick.