HTML Vidéos YouTube


La façon la plus simple de lire des vidéos en HTML est d'utiliser YouTube.


Des difficultés avec les formats vidéo ?

Convertir des vidéos dans différents formats peut être difficile et chronophage.

Une solution plus simple consiste à laisser YouTube lire les vidéos sur votre page web.


Identifiant de vidéo YouTube

YouTube affichera un identifiant (comme tgbNymZ7vqY) lorsque vous sauvegardez (ou lisez) une vidéo.

Vous pouvez utiliser cet identifiant pour faire référence à votre vidéo dans le code HTML.


Lire une vidéo YouTube en HTML

Pour lire votre vidéo sur une page web, procédez comme suit :

  • Téléchargez la vidéo sur YouTube
  • Notez l'identifiant de la vidéo
  • Définissez un <iframe> dans votre page web
  • Laissez l'attribut src pointer vers l'URL de la vidéo
  • Utilisez les attributs width et height pour spécifier les dimensions du lecteur
  • Ajoutez d'autres paramètres à l'URL (voir ci-dessous)

Exemple

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
Essayez-le vous-même »

YouTube Autoplay + Muet

Vous pouvez faire en sorte que votre vidéo commence à jouer automatiquement lorsque l'utilisateur visite la page, en ajoutant autoplay=1 à l'URL YouTube. Cependant, démarrer automatiquement une vidéo peut être ennuyeux pour vos visiteurs !

Remarque : Les navigateurs Chromium ne permettent pas l'autoplay dans la plupart des cas. Cependant, l'autoplay muet est toujours autorisé.

Ajoutez mute=1 après autoplay=1 pour que votre vidéo commence à jouer automatiquement (mais en mode muet).

YouTube - Autoplay + Muet

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1">
</iframe>
Essayez-le vous-même »


Playlist YouTube

Une liste de vidéos séparées par des virgules à lire (en plus de l'URL d'origine).


Boucle YouTube

Ajoutez playlist=videoID et loop=1 pour que votre vidéo boucle indéfiniment.

loop=0 (par défaut) - La vidéo ne sera lue qu'une seule fois.

loop=1 - La vidéo bouclera (pour toujours).

YouTube - Boucle indéfiniment

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?playlist=tgbNymZ7vqY&loop=1">
</iframe>
Essayez-le vous-même »

Contrôles YouTube

Ajoutez controls=0 pour NE PAS afficher les contrôles dans le lecteur vidéo.

controls=0 - Les contrôles du lecteur ne s'affichent pas.

controls=1 (par défaut) - Les contrôles du lecteur sont affichés.

YouTube - Contrôles

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?controls=0">
</iframe>
Essayez-le vous-même »