/
Videon upotuselementti tuotekuvaukseen

Videon upotuselementti tuotekuvaukseen

 

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


Videon lisääminen upottamalla - Youtube

Tällä ohjeella voit upottaa videon sisältösivulle, sisältömainoksiin ja tuotekuvaukseen.

Alla oleva esimerkki kertoo miten video upotetaan tuotekuvaukseen. Tuotekuvausta muokataan taustajärjestelmässä, ei verkkokaupan ylläpidossa.

  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. image-20240411-140103.png

       

  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. image-20240411-140336.png

  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.

<div class="row">
<div class="col-md-6">
<iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="" frameborder="0" height="300px" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/CSVpjrfjmeU?si=vZW9JhpkNkDeRiob " title="YouTube video player" width="600px"></iframe></div>
</div>

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


Videon lisääminen tiedostona

  1. Tallenna video verkkokaupan tiedostonhallintaan

  1. 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

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

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

<div class="col-xs-12 col-md-12"><video preload="auto" controls autoplay="false" muted controlslist="nodownload nofullscreen noremoteplayback" loop="loop" playsinline="playsinline" style="width: 450px;"><source src="https://omankauppasi-url.fi/storage/editor_files/tuotteet/630509921287/KaldheimTeaser144P.mp4" type="video/mp4" /></video> </div>

  1. Päivitä tiedot verkkokauppaan

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

 



Related content

Videon lisääminen tuotteelle ja tuoteryhmiin
Videon lisääminen tuotteelle ja tuoteryhmiin
More like this
Videomainos - näkyy mainoskarusellissa
Videomainos - näkyy mainoskarusellissa
More like this
Verkkokaupan sisältökoulutus
Verkkokaupan sisältökoulutus
Read with this
Videoupotus (iframe) verkkokaupan sisältöön
Videoupotus (iframe) verkkokaupan sisältöön
More like this
Linkin lisääminen tuotekuvaukseen
Linkin lisääminen tuotekuvaukseen
More like this
Sisältömainos (html)
Sisältömainos (html)
More like this