Videoupotus (iframe) verkkokaupan sisältöön

 

Videoupotuksen voi tehdä mihin tahansa sisältöeditoriin verkkokaupan hallinnassa.

Sisältöeditori löytyy verkkokaupasta seuraavista paikoista:

  • Sisältösivu

  • Verkkokaupan etusivu

  • Osaston ja tuoteryhmien ylä- ja alakuvaus

  • Sisältömainospaikat

  • Valmistajasivut

Lisäksi voit lisätä videon mainoskaruselliin joko linkkinä tai mp4-tiedostona.

Videomainos - näkyy mainoskarusellissa

Videoupotus demokaupassa:

https://www-confirma-wikidemo-fi.nethit.cloud/fi/i/iframe-videoupotus-esimerkki/28/


Videoupotuksen lisääminen

Tässä esimerkissä lisätään videoupotus verkkokaupan sisältösivulle.

  1. Hae verkkokaupan hallinnasta sisältöeditori, jota haluat muokata.

 

  1. Klikkaa Pohjat-napista ja valitse kuinka moneen kolumniin haluat jakaa sisällön

image-20241209-112115.png
  1. Valitse moneenko sarakkeeseen haluat asemoida sisällön

    1. valittavana on neljä, kolme, kaksi, yksi saraketta, sekä yksi laajennettava sisältöalue (haitarisisältö)

image-20241209-123109.png

 

 

  1. Tässä esimerkissä muokkaamme yhden sarakkeen vaihtoehtoa

Oletussisältö näyttää editorissa tältä:

 

  1. Klikkaa seuraavaksi Koodi-nappia, jolloin näet editorissa html-sisällön

Oletussisältö näyttää html-editorissa tältä:

 

  1. Seuraavaksi voit korvata oletussisällön iframe-upotuskoodilla

    1. siniseksi maalattu alue on oletussisältöä, joka voidaan poistaa ja jonka tilalle kopioidaan haluttu iframe-upotuskoodi

 

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

 

 

Nyt videoupotus näyttää sisältösivulla tältä:

Videoupotuksen koon muokkaaminen

Videoupotuksen koodissa määritellään videoupotuksen mitat määritteillä height ja width.

Nämä mitat määrittävät videoupotuksen koon silloin kun ruutu on riittävän iso toistamaan upotuksen niillä mitoilla mitä niihin on määritetty.

Jos ruutu taas on pienempi mitoiltaan kuin mitä videoupotukseen oon määritetty, tällöin resposiivinen kolumni muuttaa videoupotuksen mittoja niin, että video näkyy myös pienemmillä ruuduilla.

Jos muutat korkeuden ja leveyden alkuperäisistä mitoista height 315 → 675 ja width 560 → 1200, niin tällöin video näyttää tältä:

 

 

Jos haluat, että video lähtee pyörimään automaattisesti

Jos haluat, että video lähtee pyörimään heti kun sivu latautuu niin upotuskoodiin tulee lisätä seuraava koodi

?autoplay=1&amp;mute=1

heti url-sositteen perään.