Tässä artikkelissa neuvomme miten voit lisätä videon mp4-tiedostona tai iframe-upotuksena esim. suoraan Youtubesta.

Mikä on videoelementti?

Video elementti on selaimien tukema HTML koodimuotoinen linkitys olemassa olevaan videotiedostoon.
Tästä aiheesta löytyy hyvin dokumentoituja artikkeleja myös netistä.
<video>: The Video Embed element - HTML: HyperText Markup Language | MDN

1. Ota talteen Youtube videon upotuskoodi

   1. Klikkaa videon alta Jaa - Upota - Kopioi

2. Avaa taustaohjelma ja sieltä kohta, jossa tuotekuvauksen sisältö syötetään

   1. Valitse oikea tuote ja välilehti Tekstit.

   2. Klikkaa Muokkaa tekstinä.

   3. Open

      

       

3. Kun olet klikannut Muokkaa tekstinä nappia, aukeaa editori, johon voit kopioda Youtube-videon upotuskoodi (esimerkissä on käytetty upotusta, joka on kolumin sisällä).

   1.  

   2. Open

      

4. Tallenna ja päivitä tiedot verkkokauppaan

Esimerkki näyttää verkkokaupassa tältä:

HUOM!

Jos haluat, että videoupotus näkyy pienempänä, voit tehdä tuotekuvauksen sisältöön kolumnin, jonka sisälle videoupotus laitetaan.

Kopioi alla oleva koodi tuotekuvaukseen ja lisää siihen upotuskoodi korvaamalla esimerkissä oleva sininen teksti.

Tästä linkistä voit katsoa miltä yllä oleva koodi näyttää verkkokaupassa:

1. Tallenna video verkkokaupan tiedostonhallintaan

2. Ota talteen videon linkki

   1. Linkki videoon saadaan kopioitua tiedoston lisätiedoista.

   2. Linkin tulee olla muodossa “https://omankauppasi-url.fi/storage/editor_files/tuotteet/630509921287/KaldheimTeaser144P.mp4”

3. Avaa taustaohjelma ja sieltä kohta, jossa tuotekuvauksen sisältö syötetään

4. Muokkaa tuotekuvausta HTML-editorissa ja kopio sinne alla oleva koodi. Vaihda alla olevaan koodiin urlin tilalle oman video-tiedostosi url.

5. Päivitä tiedot verkkokauppaan

6. Nyt tuotteen tuotesivun tuotekuvauksessa näkyy upottamasi video.