HTML YouTube-video

Yksinkertaisin tapa sisällyttää video HTML:ään on käyttää YouTubea.

Onko hankaluuksia videoformaatin kanssa?

Videon muuntaminen toiseen muotoon voi olla sekä vaikeaa että aikaa vievää.

Yksinkertaisempi ratkaisu on antaa YouTube toistaa video sinun sivullasi.

YouTube Video Id

Kun tallennat (tai toistat) videon, YouTube näyttää id:n (esim. ih1l6wb7LhU).

Voit käyttää tätä id:tä ja viitata siihen HTML-koodissa.

HTML:ssä YouTube-video

Jos haluat toistaa videon sivulla, suorita seuraavat vaiheet:

  • Lähetä video YouTubeen
  • Muista videon id
  • Määritä sivullasi <iframe> elementille
  • Antaa src ominaisuutta osoittamaan videon URL-osoite
  • Käytä leveys ja korkeus Ominaisuudet määrittelevät soittimen koosta
  • Lisää URL:ään muita parametreja (katso alla)

Esimerkki

<iframe width="420" height="315"
src="https://www.youtube.com/embed/ih1l6wb7LhU">
</iframe>

Kokeile itse

YouTube Autoplay + Mute

Voit tehdä tämän lisäämällä autoplay=1 YouTube-URL:ään, jotta video aloittaa automaattisesti toistumisen, kun käyttäjä vierailee sivulla. Mutta, automaattinen toistaminen voi ärsyttää kävijöitäsi!

Huomio:Useimmissa tapauksissa Chromium-selaimet eivät salli automaattista toistoa. Mutta äänettömästä automaattisesta toistosta on aina sallittu.

Tässä autoplay=1 Lisää jälkeen mute=1Antaa videon alkavansa automaattisesti toistumaan (mutta hiljennettynä).

YouTube - Automaattinen toisto + Mute

<iframe width="420" height="315"
src="https://www.youtube.com/embed/ih1l6wb7LhU?autoplay=1&mute=1">
</iframe>

Kokeile itse

YouTube Soittolista

Komavaihteella erotetut toistettavat videoiden lista (alkuperäinen URL poislukien).

YouTube Jatkuva toisto

Lisää loop=1 Tekee videon aina toistuvan.

Arvo 0 (oletus): Video toistetaan kerran.

Arvo 1: Video toistetaan jatkuvasti (ikuisesti).

YouTube - Jatkuva toisto

<iframe width="420" height="315"
src="https://www.youtube.com/embed/ih1l6wb7LhU?playlist=ih1l6wb7LhU&loop=1">
</iframe>

Kokeile itse

YouTube Ohjaukset

Lisää controls=0 Tekee videonsoittimesta ohjausten näkymättömän.

Arvo 0: Soittimen ohjaukset eivät näy.

Arvo 1 (oletus): Näytetään soittimen ohjaukset.

YouTube - Ohjaukset

<iframe width="420" height="315"
src="https://www.youtube.com/embed/ih1l6wb7LhU?controls=0">
</iframe>

Kokeile itse