Videon upotuselementti tuotekuvaukseen
- Petri Kaija
- Hanna Lidman
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.
Ota talteen Youtube videon upotuskoodi
Klikkaa videon alta Jaa - Upota - Kopioi
Avaa taustaohjelma ja sieltä kohta, jossa tuotekuvauksen sisältö syötetään
Valitse oikea tuote ja välilehti Tekstit.
Klikkaa Muokkaa tekstinä.
Kun olet klikannut Muokkaa tekstinä nappia, aukeaa editori, johon voit kopioda Youtube-videon upotuskoodi (esimerkissä on käytetty upotusta, joka on kolumin sisällä).
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
Tallenna video verkkokaupan tiedostonhallintaan
Ota talteen videon linkki
Linkki videoon saadaan kopioitua tiedoston lisätiedoista.
Linkin tulee olla muodossa “https://omankauppasi-url.fi/storage/editor_files/tuotteet/630509921287/KaldheimTeaser144P.mp4”
Avaa taustaohjelma ja sieltä kohta, jossa tuotekuvauksen sisältö syötetään
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>
Päivitä tiedot verkkokauppaan
Nyt tuotteen tuotesivun tuotekuvauksessa näkyy upottamasi video.