Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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

Info

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

image-20241209-130017.png

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

image-20241209-130141.png

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

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

image-20241209-130320.png

  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

image-20241209-130803.png

Code Block
languagehtml
<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>

image-20241209-130930.png

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

image-20241210-075716.png

Videoupotuksen koon muokkaaminen

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

image-20241210-090026.png

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ä:

image-20241210-093059.png

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

Code Block
?autoplay=1&amp;mute=1

heti url-sositteen perään.

image-20241210-105309.png