MEILLEUR SITE POUR LES DÉVELOPPEURS WEB
HTML5 Cours pour débutants

En Ua Es De

HTML YouTube Vidéos


Le moyen le plus simple de lire des vidéos en HTML consiste à utiliser YouTube.


Vous avez des difficultés avec les formats vidéo ?

Convertir des vidéos vers différents formats peut s'avérer difficile et prendre beaucoup de temps.

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


Identifiant de la vidéo YouTube

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

Vous pouvez utiliser cet identifiant et 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
  • Prenez note de l'identifiant de la vidéo
  • Définir un élément <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 la dimension 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>
Try it Yourself »

Lecture automatique YouTube + Mute

Vous pouvez laisser votre vidéo démarrer automatiquement lorsqu'un utilisateur visite la page, en ajoutant autoplay=1 à l'URL YouTube. Cependant, lancer automatiquement une vidéo est ennuyeux pour vos visiteurs !

Remarque : Les navigateurs Chromium n'autorisent pas la lecture automatique dans la plupart des cas. Cependant, la lecture automatique en sourdine est toujours autorisée.

Ajoutez mute=1 après autoplay=1 pour permettre à votre vidéo de démarrer automatiquement (mais en mode silencieux).

YouTube - Autoplay + Muted

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

YouTube Liste de lecture

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


Boucle YouTube

Ajoutez loop=1 pour laisser votre vidéo tourner en boucle indéfiniment.

Valeur 0 (par défaut) : la vidéo ne sera lue qu'une seule fois.

Valeur 1 : la vidéo sera en boucle (pour toujours).

YouTube — Boucle

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

YouTube Contrôles

Ajoutez controls=0 pour ne pas afficher les commandes dans le lecteur vidéo.

Valeur 0 : les commandes du lecteur ne s'affichent pas.

Valeur 1 (par défaut) : affichage des commandes du joueur.

YouTube — Contrôles

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


Commentaires