Vstavljanje Youtube videa v HTML

YouTube video v spletno stran najpogosteje vstavimo z oznako <iframe>. Ta oznaka v dokument vključi drug spletni dokument, v tem primeru YouTube predvajalnik. Vdelani YouTube predvajalnik uporablja poseben naslov oblike https://www.youtube.com/embed/ID_VIDEA.

Najpreprosteje pridemo do pravilne kode tako, da na YouTubu pri videu izberemo možnost Skupna raba in nato Vdelaj. YouTube pripravi ustrezno kodo, ki jo nato vključimo v HTML dokument. YouTube pri vdelavi podpira tudi več dodatnih parametrov, na primer autoplay, controls, loop in druge.

Pomni: Pri vdelanem YouTube videu običajno uporabimo povezavo oblike https://www.youtube.com/embed/ID_VIDEA. Namesto ID_VIDEA vstavimo dejanski identifikator videa.

Osnovna pravila

YouTube video vdelamo z oznako <iframe>.
Atribut src vsebuje naslov vdelanega predvajalnika.
Za opis vsebine okvirja uporabimo atribut title.
Po potrebi omogočimo celozaslonski prikaz z atributom allowfullscreen.
Velikost okvirja določimo z atributoma width in height.

Pozor: Pri YouTube videu ne uporabljamo oznake <video>, ker datoteka ni vključena neposredno kot datoteka na naši strani, ampak se vsebina predvaja prek vdelanega YouTube predvajalnika v oznaki <iframe>.

Vdelani YouTube predvajalnik mora biti dovolj velik za prikaz vsebine in kontrolnikov. Pri vdelavi je priporočena najmanjša velikost 200 × 200 slikovnih točk, pri razmerju 16 : 9 pa je priporočljiva večja širina.

Osnovni primer

Najpreprostejši primer vdelanega YouTube videa:

<iframe width="560" height="315"
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
title="YouTube video predvajalnik"
allowfullscreen></iframe>

Pomen pomembnejših atributov

width določa širino videa,
height določa višino videa,
src vsebuje naslov vdelanega YouTube videa,
title opisuje vsebino okvirja,
allowfullscreen omogoča celozaslonski prikaz,
allow določa, katere dodatne možnosti so dovoljene v vdelanem predvajalniku,
referrerpolicy določa pravilo pošiljanja podatkov o izvorni strani pri zahtevah.

Primer z več atributi

Vdelani video lahko opremimo še z dodatnimi atributi, ki jih pogosto pripravi že YouTube:

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

Pogosti parametri predvajalnika

V naslov v atributu src lahko dodamo tudi parametre, s katerimi prilagodimo delovanje predvajalnika. Pogosto uporabljeni parametri so na primer:

autoplay=1 – video se začne samodejno predvajati,
controls=0 ali controls=1 – določa prikaz kontrolnikov,
loop=1 – omogoča ponavljanje predvajanja,
cc_load_policy=1 – omogoča prikaz podnapisov privzeto,
hl=sl – določa jezik uporabniškega vmesnika predvajalnika.

Primer povezave s parametrom autoplay:

<iframe width="560" height="315"
src="https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1"
title="YouTube video predvajalnik"
allowfullscreen></iframe>

Primer manjšega videa

Velikost videa lahko prilagodimo prostoru na strani, vendar mora biti okvir dovolj velik za ustrezen prikaz predvajalnika.

<iframe width="400" height="225"
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
title="YouTube video predvajalnik"
allowfullscreen></iframe>

Pri vdelavi YouTube videa uporabljamo kodo, ki jo pripravi ali podpira YouTube. Določeni starejši parametri predvajalnika niso več aktivni oziroma nimajo več učinka, zato je priporočljivo uporabljati le tiste parametre, ki so še uradno podprti.

Priporočila

Za vdelavo YouTube videa uporabljaj oznako <iframe>.
Uporabi povezavo oblike https://www.youtube.com/embed/ID_VIDEA.
Dodaj smiseln atribut title.
Velikost okvirja prilagodi prostoru na strani, vendar ohrani preglednost predvajalnika.
Uporabljaj le podprte parametre predvajalnika.

Pogoste napake

Za YouTube video je uporabljena oznaka <video> namesto oznake <iframe>.
V atributu src ni uporabljen naslov oblike embed.
Okvir nima atributa title.
Predvajalnik je nastavljen na premajhno velikost.
Uporabljeni so zastareli ali nepodprti parametri.

Nazaj

Naprej