Vidéos YouTube en HTML
Parfois, vous souhaiterez peut-être convertir vos vidéos dans d'autres formats pour qu'elles s'exécutent dans tous les navigateurs. Cependant, cela peut être difficile et prendre du temps. Une méthode plus simple consiste à intégrer directement le lecteur YouTube sur votre page web à l'aide d'un <iframe> élément.
Lors de l'enregistrement ou de la lecture d'une vidéo, YouTube affiche un identifiant que vous pouvez utiliser pour faire référence à une vidéo dans le code HTML.
Intégrer une vidéo YouTube en HTML
Si vous souhaitez lire votre vidéo sur une page web, suivez ces étapes :
- Téléchargez la vidéo sur YouTube
- Notez l'identifiant de la vidéo
- Spécifiez un
<iframe>élément sur votre page web - Faites pointer l'attribut
srcvers l'URL de la vidéo - Utilisez les attributs
heightetwidthpour définir les dimensions du lecteur - Ajoutez d'autres paramètres à l'URL (par ex.
&rel=0pour empêcher l'affichage de vidéos recommandées non liées après la lecture)
Exemple d'intégration d'une vidéo YouTube en HTML avec l'élément <iframe> :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/i8n1gSw_o_8" allow="autoplay; fullscreen"></iframe>
</body>
</html>Lecture automatique YouTube
Vous pouvez également faire démarrer la lecture de votre vidéo automatiquement lors de la visite de la page. Pour cela, ajoutez un paramètre à votre URL YouTube.
Si la valeur est 0 (par défaut), la vidéo ne se lancera pas automatiquement au chargement du lecteur. Si la valeur est 1, la vidéo se lancera automatiquement au chargement du lecteur.
Remarque : Les navigateurs modernes exigent l'attribut allow sur l'iframe pour que la lecture automatique et le plein écran fonctionnent correctement.
Exemple de lecture automatique YouTube :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/i8n1gSw_o_8?autoplay=1" allow="autoplay; fullscreen"></iframe>
</body>
</html>Outre l'URL d'origine, il peut s'agir d'une liste de vidéos séparées par des virgules à lire (playlist YouTube).
Contrôles YouTube
Si la valeur est 0, les contrôles du lecteur ne s'afficheront pas. Si la valeur est 1 (par défaut), les contrôles du lecteur s'afficheront.
Exemple de contrôles YouTube :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/i8n1gSw_o_8?controls=0" allow="autoplay; fullscreen"></iframe>
</body>
</html>Boucle YouTube
Si la valeur est 0 (par défaut), la vidéo ne sera lue qu'une seule fois. Si la valeur est 1, la vidéo bouclera en continu.
Exemple de boucle YouTube :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/i8n1gSw_o_8?playlist=i8n1gSw_o_8&loop=1" allow="autoplay; fullscreen"></iframe>
</body>
</html>YouTube - Utilisation des balises HTML <embed> ou <object>
Les éléments YouTube <embed> et <object> sont dépréciés. À la place, vous devriez utiliser <iframe>.
Exemple d'ajout de vidéos YouTube avec l'élément <embed> :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<embed width="560" height="315" src="https://www.youtube.com/embed/i8n1gSw_o_8" />
</body>
</html>Exemple d'ajout de vidéos YouTube avec l'élément <object> :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<object width="560" height="315" data="https://www.youtube.com/embed/i8n1gSw_o_8"></object>
</body>
</html>Pratique
Quelle balise HTML est utilisée pour intégrer des vidéos YouTube dans une page web ?