Videon upotuselementti tuotekuvaukseen

Owned by Petri Kaija
Last updated: Apr 11, 2024 by Hanna Lidman
3 min read

 

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ä.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-loop

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.