Videoclipuri YouTube în HTML

Videoclipuri YouTube HTML

Cea mai simplă modalitate de a reda videoclipuri în HTML este să folosiți YouTube.

Aveți Probleme cu Formatele Video?

Convertirea videoclipurilor în diferite formate poate fi dificilă și consumatoare de timp. O soluție mai simplă este să lăsați YouTube să redea videoclipurile pe pagina dvs.

Id-ul Videoclipului YouTube

YouTube afișează un id (precum tgbNymZ7vqY) atunci când salvați sau redați un videoclip. Folosiți acest id pentru a face referire la videoclip în HTML-ul dvs.

Redarea unui Videoclip YouTube în HTML

Pentru a reda un videoclip pe o pagină: încărcați-l pe YouTube, notați id-ul videoclipului, adăugați un element <iframe>, îndreptați atributul src către URL-ul videoclipului, setați width și height pentru player și adăugați orice alți parametri la URL.

Exemplu

Un videoclip YouTube încorporat cu un <iframe>.

O pagină care încorporează un video YouTube cu un iframe (lățime 420, înălțime 315) al cărui src indică URL-ul de încorporare YouTube pentru videoul cu id-ul tgbNymZ7vqY.

> Ieșire: pagină HTML completă

Prompt

O pagină care încorporează un video YouTube cu un iframe (lățime 420, înălțime 315) al cărui src indică URL-ul de încorporare YouTube pentru videoul cu id-ul tgbNymZ7vqY.

Ieșire: pagină HTML completă

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YouTube de bază</title>
</head>
<body>

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

</body>
</html>

Redare Automată + Fără Sunet YouTube

Puteți face un videoclip să pornească automat când un utilizator vizitează pagina, adăugând autoplay=1 la URL-ul YouTube, deși pornirea automată a unui videoclip poate deranja vizitatorii.

Notă: Browserele Chromium blochează de obicei redarea automată, dar redarea automată fără sunet este întotdeauna permisă. Adăugați mute=1 după autoplay=1 pentru a permite videoclipului să pornească automat, dar fără sunet.

Exemplu

Un videoclip YouTube care se redă automat fără sunet.

O pagină care încorporează un video YouTube ce pornește automat fără sunet, adăugând autoplay=1 și mute=1 la URL-ul de încorporare pentru videoul cu id-ul tgbNymZ7vqY.

> Ieșire: pagină HTML completă

Prompt

O pagină care încorporează un video YouTube ce pornește automat fără sunet, adăugând autoplay=1 și mute=1 la URL-ul de încorporare pentru videoul cu id-ul tgbNymZ7vqY.

Ieșire: pagină HTML completă

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Redare automată YouTube fără sunet</title>
</head>
<body>

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

</body>
</html>

Listă de Redare YouTube

Parametrul playlist ia o listă de videoclipuri separate prin virgulă, de redat pe lângă URL-ul original.

Buclă YouTube

Adăugați playlist=videoID și loop=1 pentru a face un videoclip să se repete la nesfârșit. loop=0 (implicit) redă videoclipul o singură dată, iar loop=1 îl repetă la nesfârșit.

Exemplu

Un videoclip YouTube setat să se repete la nesfârșit.

O pagină care încorporează un video YouTube ce se repetă la infinit, adăugând playlist=tgbNymZ7vqY și loop=1 la URL-ul de încorporare.

> Ieșire: pagină HTML completă

Prompt

O pagină care încorporează un video YouTube ce se repetă la infinit, adăugând playlist=tgbNymZ7vqY și loop=1 la URL-ul de încorporare.

Ieșire: pagină HTML completă

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Buclă YouTube</title>
</head>
<body>

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

</body>
</html>

Controale YouTube

Adăugați controls=0 pentru a ascunde controalele playerului. controls=0 le ascunde, iar controls=1 (implicit) le afișează.

Exemplu

Un videoclip YouTube cu controalele playerului ascunse.

O pagină care încorporează un video YouTube cu controalele playerului ascunse, adăugând controls=0 la URL-ul de încorporare pentru videoul cu id-ul tgbNymZ7vqY.

> Ieșire: pagină HTML completă

Prompt

O pagină care încorporează un video YouTube cu controalele playerului ascunse, adăugând controls=0 la URL-ul de încorporare pentru videoul cu id-ul tgbNymZ7vqY.

Ieșire: pagină HTML completă

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Controale YouTube</title>
</head>
<body>

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

</body>
</html>