Pridanie videa z youtube cez iframe

Video z YouTube vložíte na stránku cez kód iframe, ktorý sa prispôsobí šírke obrazovky. Návod ukazuje, kde na YouTube získate odkaz na vloženie a ako ho použiť vo vlastnom HTML kóde.

1) Skopírovanie odkazu na video z YouTube

Video sa prehráva priamo z YouTube, na vašom webe nezaberá miesto a vďaka kódu nižšie sa prispôsobí šírke obrazovky na počítači aj na mobile. Ďalšie spôsoby vloženia videa nájdete v návode Pridanie videa.

  • na YouTube otvorte video, ktoré chcete pridať na stránku
  • pod videom kliknite na Share (Zdieľať)
  • v okne zdieľania kliknite na Embed (Vložiť)
  • v zobrazenom kóde označte a skopírujte adresu za textom src= medzi úvodzovkami - má tvar https://www.youtube.com/embed/...

2) Vloženie kódu na stránku

Na stránke otvorte v hornom paneli záložku Webstránka a kliknite na Upraviť aktuálnu stránku. Ak tlačidlo nevidíte, nemáte právo stránku upravovať - obráťte sa na správcu webu.

  • kliknite na miesto na stránke, kam má video prísť
  • v záložke + Pridať kliknite na Vlastný HTML kód
  • kliknite na text, ktorý sa na stránke zobrazil, a do poľa HTML kód vložte tento kód:

    <div style="position: relative; padding-bottom: 56.25%"> <iframe style="width:100%; height:100%; position:absolute; left:0px; top:0px;" frameborder="0" width="100%" height="100%" allowfullscreen="allowfullscreen" allow="autoplay" src="YOUTUBE_VIDEO_URL"></iframe></div>

  • text YOUTUBE_VIDEO_URL nahraďte adresou skopírovanou v kapitole 1 (úvodzovky ponechajte)

3) Kontrola a uloženie

Video sa zobrazí na stránke a mení veľkosť podľa šírky obrazovky. Ukážka:

Prácu priebežne ukladajte tlačidlom Uložiť Uložiť - neuložené zmeny sa po zatvorení prehliadača stratia (Uloženie zmien).

4) Rovnaký postup pre iný obsah: 360° panoráma

Kódom z kapitoly 2 vložíte na stránku akýkoľvek obsah, ktorý poskytovateľ ponúka na vloženie cez iframe - napríklad mapu, rezervačný formulár alebo 360° panorámu. Namiesto adresy videa doň vložte adresu daného obsahu.

Pri 360° panoráme postupujte takto:

  • pripravte si panoramatickú fotografiu (napríklad JPG z fotoaparátu alebo mobilu v režime 360°)
  • v bezplatnom nástroji Marzipano Tool z nej vytvorte prehliadač panorámy a stiahnite ho - vznikne priečinok so súborom index.html
  • priečinok pošlite administrátorovi webu - nahrá ho na váš web a vráti vám jeho adresu, napríklad https://vas-eshop.sk/media/360/nazov-panoramy/ (prípadne použite službu, ktorá panorámu hosťuje a ponúka kód na vloženie)
  • adresu vložte do kódu z kapitoly 2 namiesto YOUTUBE_VIDEO_URL. Panoráma má iný pomer strán ako video, preto namiesto padding-bottom: 56.25% zvoľte vyššiu hodnotu, napríklad 75%.

5) Na čo si dať pozor

  • Namiesto videa sa zobrazí chyba. Do kódu ste vložili bežnú adresu videa (youtube.com/watch?v=... alebo youtu.be/...). Použite adresu z kódu Embed, ktorá obsahuje /embed/.
  • Kód nefunguje po úprave. Skontrolujte, že ste pri nahrádzaní nezmazali úvodzovky okolo adresy.
  • Video sa nedá prehrať. Autor na YouTube mohol vkladanie videa na iné weby zakázať - vtedy ho vložiť nemôžete.
  • Vložený obsah z iného webu sa nezobrazí. Adresa musí začínať https:// - obsah z adresy http:// prehliadač na zabezpečenom webe zablokuje. Niektoré weby vkladanie cez iframe nepovoľujú vôbec.

V skratke: YouTube -> Share -> Embed -> skopírovať adresu za src= -> Upraviť aktuálnu stránku -> + Pridať -> Vlastný HTML kód -> vložiť kód a nahradiť YOUTUBE_VIDEO_URL -> Uložiť.

Značky článkov

Mohlo by Vás zaujímať:

Synchronizácia newslettera s Mailchimpom

Pridanie novej šablóny webu

Pridanie preddefinovaného bloku do knižnice blokov

Cenové katalógy - dátový model a výber ceny

Komentáre a hodnotenia

Prázdny