A rendszer több helyén is lehetséges videót beilleszteni a Youtube videó megosztó rendszeréből. Ebben a bejegyzésben ennek a beállítási lehetőségeit vesszük sorra.
Videó beillesztése
Ha még nem tettük, először regisztrálnunk kell a Youtube-ra, majd ez alapján az útmutató alapján töltsük fel a videónkat a Youtube rendszerébe.
Nyissük meg a videót, és a videó alatt kattintsunk először a Megosztás, majd a megjelenő Beágyazás gombra. Így meg fog jelenni egy új mező, ahol ehhez hasonló HTML kódot fogunk majd látni:
A kódban a width a szélességet, a height a magasságot jelenti, ezeket tudjuk is módosítani (a Shoprenterben egy szöveges tartalomban 500 pixel széles videó fér el kényelmesen).
Ezután másoljuk ki a HTML kódot.
Webáruházunk felületén keressük meg vagy hozzuk létre azt a szöveges tartalmat, ahova a videót be szeretnénk illeszteni.
A szöveges tartalom szövegszerkesztőjénél álljunk be a kurzorral oda, ahova a videót szeretnénk elhelyezni. Kattintsunk a szöveg fölötti menüsorban az Embed Media gombra, és illesszük be a kódot. A kódot úgy is be tudjuk illeszteni, ha a Forráskód gombra kattintva megkeressük a megfelelő helyet, és bemásoljuk.
Automatikusan elinduló videó
A videó automatikus elindulásához a videó beillesztéshez hasonlóan kell a kódot megadni ezzel a plusz kóddal ellátva:
&autoplay=1
Például ehhez hasonlóan lehet a kódrészletet hozzátenni:
<iframe width="560" height="315" src="https://www.youtube.com/embed/nw7_uU8K_JQ?si=xzWPuBPa7Iuty0Y4&autoplay=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
A videó némítása
A videó némításához az alábbi kóddal kell kiegészíteni a youtube videó linkjét:
&mute=1
A Shoprenterben beillesztés után így fog kinézni az iframe:
<iframe width="560" height="315" src="https://www.youtube.com/embed/nw7_uU8K_JQ?si=xzWPuBPa7Iuty0Y4&mute=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
Reszponzív megjelenés
Manapság egyre fontosabb, hogy mobilon is jól jelenjenek meg a beillesztett videóink. A Youtube által biztosított kód automatikusan nem teszi reszponzívvá a videókat, de a következő oldal ebben segítségünkre lehet: https://embedresponsively.com/
Válasszuk ki a Youtube fület, másoljuk be a videó linkjét, majd kattintsunk az Embed gombra. Az Embed code mezőból másoljuk ki a kapott kódot, majd nyomjunk rá a szöveges tartalom szerkesztésénél látható Forráskód gombra, és ide másoljuk be a kódot. Mentés után illeszkedni fog a beszúrt videó a képernyőhöz.
Shorts
Napjainkban a YouTube-on egyre több Shorts videó található, és ezek is beilleszthetők weboldalba némi alap HTML-ismerettel. A YouTube felületén ugyan nincs külön „Beágyazás” opció a Shorts videóknál, de egy egyszerű iframe kóddal megoldható a megjelenítés.
Ehhez a Shorts linket:
https://www.youtube.com/shorts/VIDEO_ID
át kell alakítani ilyen formára:
https://www.youtube.com/embed/VIDEO_ID
Majd ezt lehet az iframe kódba beilleszteni. Erre egy példa:
<iframe
width="315"
height="560"
src="https://www.youtube.com/embed/VIDEO_ID"
allowfullscreen>
</iframe>
Ez egy alap beágyazási megoldás, amit saját felelősségre bárki használhat. Ugyanakkor ha rendelkezünk HTML-ismerettel, akkor jobban is személyre lehet szabni a megjelenítést.