Bädda in en video eller youtube-klipp

Lägg upp ett videoklipp på en produktsida, produktgruppssida eller egen sida.

Jag har ett videoklipp, kan jag ladda upp det i filarkivet?

Ja du kan ladda upp videoklippet i filarkivet men man bör alltid använda en streaming-tjänst som YouTube, Vimeo eller liknande för sina videoklipp. Om man har filmat något exempelvis med sin mobil och laddar upp videofilen direkt på sajten så måste besökarna ladda hem hela videofilen innan dom kan kolla på klippet. Detta kan göra att hela butiken blir väldigt trög och laddar långsamt. Därför ska man alltid ladda upp videoklippet på exempelvis YouTube och sedan "bäddar" man in klippet därifrån på sin sida.

Viktigt att tänka på

Abicarts teman är responsiva vilket innebär att designen anpassar sig efter besökarnas skärmstorlekar. Oftast när man kopierar en inbäddnings-kod från en streaming-tjänst finns det en fast angiven bredd och höjd i koden vilket gör att videoklippet inte blir responsivt. Vi går igenom längre ner på denna sidan hur man gör klippet responsivt.

Bädda in en länk från YouTube

1. När du laddat upp en film till YouTube klickar du på "Dela" under videon
2. Klicka sedan på "Bädda in" och kopiera koden
3. Du klistrar in länken i artikelbeskrivningen på den artikel där videon ska dyka upp.
4. Gå till Produkter -> välj produkt, redigera klistra in koden i "Beskrivning". Spara. 

Göra en video responsiv och fullbredd

En video som läggs in i temat kommer inte automatiskt att anpassa sig efter besökarens skärmstorlek. 
Lösning: Gå till https://embedresponsively.com/ och klistra in länken från YouTube eller Vimeo och klicka på "Embed". OBS! Tänk på att det ska vara URL som du kopierar från adressfältet och inte delningslänken.

Koden som sedan dyker upp består av en CSS-del och en HTML-del som du behöver klistra in på två olika ställen. Koden som ligger mellan "style-taggarna" lägger du in i din stilmall i temat och HTML-koden som kommer efter style-taggarna (markerad i bild) klistrar du in i källkoden i en egen HTML-modul.

Du kan även lägga videon på en produktsida:
Produkter -> välj produkt, redigera -> klistra in koden "Beskrivning".

Exempel: 

Bädda in en länk från YouTube-shorts

När videon du vill bädd in är en "shorts" video behöver du redigera URL:en du hämtar från Youtube.

Länken du får ser ut så här: https://youtube.com/shorts/exempelvideo
Den behöver redigeras att se ut såhär: https://youtube.com/embed/exempelvideo

Kopiera + klistra in koden nedan i din editor och ersätt sedan dessa fält:

- Video-URL
- Den optimala storleken för en Shorts-video är 315px x 560px, men du kan ändra bildstorleken efter behov. Se till att bildförhållandet bibehålls.
- Bildramens kant i pixlar (px)

<iframe width="315" height="560" src="https://www.youtube.com/embed/exempelURL" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Följ dessa steg:

1. Öppna videon på Youtube

2. Kopiera videolänken som finns i adressfältet i din webbläsare.
(eller) Klicka på Dela > Kopiera.

4. Klistra in den kopierade videolänken i iFrame-koden som nämns ovan.

5. Ersätt /shorts/ med /embed/ i videons URL:

Före: https://youtube.com/shorts/exempelvideo
Efter: https://youtube.com/embed/exempelvideo

6) Ändra width/height om det behöver anpassas.

Nu ska koden t.ex. se ut så här:

<iframe width="315" height="560" src="https://youtube.com/embed/uE9S4UiINEc?si=0Sbx8nxSh7hAOcVc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

5) Lägg in koden i source code (<>) i valfritt HTML-block.

Det kan t.ex. vara en produktbeskrivning, en egen sida, produktgrupp eller starsidan.

När du lägger in koden i butiken visas videon så här: