Tutoriel HTML

ACCUEIL HTML Introduction HTML Éditeurs HTML HTML de base Éléments HTML Attributs HTML En-têtes HTML Paragraphes HTML Styles HTML Formatage HTML Citations HTML Commentaires HTML Couleurs HTML HTMLCSS Liens HTML Images HTML Icône de favori HTML Tableaux HTML Listes HTML Bloc HTML et Inline Cours HTML Identifiant HTML Iframes HTML HTMLJavaScript Chemins d'accès aux fichiers HTML Tête HTML Mise en page HTML HTML réactif Code informatique HTML Sémantique HTML Guide de style HTML Entités HTML Symboles HTML Émojis HTML Jeu de caractères HTML Encodage d'URL HTML HTML contre XHTML

Formulaires HTML

Formulaires HTML Attributs de formulaire HTML Éléments de formulaire HTML Types d'entrée HTML Attributs d'entrée HTML Attributs du formulaire de saisie HTML

Graphiques HTML

Canevas HTML HTML SVG

Médias HTML

Médias HTML Vidéo HTML Audio HTML Modules externes HTML YouTube HTML

API HTML

Géolocalisation HTML Glisser/déposer HTML Stockage Web HTML Travailleurs Web HTML HTML SSE

Exemples HTML

Exemples HTML Questionnaire HTML Exercices HTML Certificat HTML Résumé HTML Accessibilité HTML

Références HTML

Liste de balises HTML Attributs HTML Attributs globaux HTML Prise en charge du navigateur HTML Événements HTML Couleurs HTML Canevas HTML HTML Audio/Vidéo Doctypes HTML Jeux de caractères HTML Encodage d'URL HTML Codes de langue HTML Messagerie HTTP Méthodes HTTP Convertisseur PX en EM Raccourcis clavier

Vidéos YouTube HTML


Le moyen le plus simple de lire des vidéos en HTML est d'utiliser YouTube.


Vous avez du mal avec les formats vidéo ?

La conversion de vidéos en différents formats peut être difficile et prendre du temps.

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


Identifiant 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
  • Notez l'identifiant de la vidéo
  • Définir un <iframe>élément dans votre page Web
  • Laissez l' srcattribut pointer vers l'URL de la vidéo
  • Utilisez les attributs widthet pour spécifier la dimension du joueur height
  • Ajoutez tout autre paramètre à l'URL (voir ci-dessous)

Exemple

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

Lecture automatique YouTube + Muet

Vous pouvez laisser votre vidéo commencer à jouer automatiquement lorsqu'un utilisateur visite la page, en ajoutant autoplay=1à l'URL YouTube. Cependant, le démarrage automatique d'une vidéo est embêtant 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=1après autoplay=1pour que votre vidéo commence à jouer automatiquement (mais en sourdine).

YouTube – Lecture automatique + Mise en sourdine

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


Liste de lecture YouTube

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


Boucle YouTube

Ajoutez loop=1pour laisser votre vidéo en boucle pour toujours.

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>

Commandes YouTube

Ajouter controls=0pour 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 lecteur.

YouTube – Commandes

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