tigtools

Générateur de code d'intégration YouTube

Collez un lien YouTube, choisissez les options du lecteur et copiez le code iframe dans votre site. Le mode responsive remplit la largeur de son conteneur au format 16:9.

Fonctionne dans votre navigateur Sans inscription

Vidéo

Lecture

Un code de langue tel que en, de ou pt-BR. Définit la langue de l’interface du lecteur et, si les sous-titres sont activés, la langue des sous-titres privilégiée.

Taille et page

Taille

Le lecteur occupe toute la largeur de son conteneur et conserve un format 16:9 grâce à la propriété CSS aspect-ratio, prise en charge par les navigateurs récents.

Décrit le lecteur pour les lecteurs d’écran. Utilisez le titre de la vidéo si possible.

Code d’intégration

Collez un lien vidéo pour obtenir le code d’intégration.

Mode d’emploi

  1. Collez le lien de la vidéo YouTube ou son identifiant de 11 caractères.
  2. Définissez les moments de début et de fin et les options de lecture souhaitées.
  3. Choisissez un affichage responsive ou une taille fixe, et définissez un titre descriptif.
  4. Copiez le HTML et collez-le dans votre page ou dans le bloc HTML de votre constructeur de site. Utilisez Afficher l'aperçu pour le tester.

Fonctionnement

Le code utilise le lecteur iframe standard de YouTube. Les options deviennent des paramètres d’URL sur l’adresse du lecteur : start et end (en secondes), autoplay, mute, loop avec playlist, controls=0, cc_load_policy=1 pour les sous-titres, cc_lang_pref pour la langue des sous-titres et hl pour la langue du lecteur. Le mode confidentialité renforcée remplace l’adresse par youtube-nocookie.com.

Certaines options ont des limites définies par YouTube ou par les navigateurs. La lecture automatique ne fonctionne que si la vidéo est en sourdine ; l’outil ajoute donc mute=1 avec autoplay. La lecture en boucle d’une seule vidéo nécessite le paramètre playlist défini sur le même identifiant de vidéo, ce que l’outil ajoute. Les sous-titres ne s’affichent que si la vidéo en possède. Les vidéos dont les propriétaires ont désactivé l’intégration afficheront une erreur dans le lecteur.

Le mode responsive enveloppe l’iframe dans un bloc avec aspect-ratio: 16 / 9 et width: 100%, afin qu’il s’adapte à la page sans l’ancienne astuce padding-bottom. Le mode fixe écrit les attributs width et height. Le chargement différé retarde le lecteur jusqu’à ce qu’il soit proche de la partie visible de la page.

Exemples

Intégration responsive respectueuse de la vie privée

Réglages par défaut : youtube-nocookie.com, responsive 16:9 et chargement différé. Collez le code dans n’importe quelle page HTML.

Boucle façon fond vidéo

Lecture automatique, boucle et absence de contrôles donnent …/embed/ID?autoplay=1&mute=1&loop=1&playlist=ID&controls=0.

Lire une seule section

Commencer à 1:00 et arrêter à 2:30 donnent start=60&end=150 : le lecteur ne lit que cette partie.

Foire aux questions

Pourquoi ma vidéo intégrée ne se lance-t-elle pas automatiquement avec le son ?

Les navigateurs bloquent la lecture automatique avec son. La lecture automatique nécessite mute=1, que l'outil ajoute automatiquement ; certains navigateurs ou réglages la bloquent malgré tout.

Que fait le mode de confidentialité renforcée ?

Il charge le lecteur depuis youtube-nocookie.com. Selon YouTube, les informations sur les visiteurs ne sont alors pas stockées à des fins de personnalisation tant qu'ils ne lisent pas la vidéo.

Pourquoi ai-je besoin de playlist= pour la lecture en boucle ?

Le paramètre loop de YouTube ne fonctionne qu'avec une playlist. Définir playlist sur l'ID de la même vidéo permet de la répéter.

Le code généré fonctionne-t-il dans WordPress ?

Oui. Collez-le dans un bloc HTML personnalisé. Certains constructeurs de sites suppriment les iframes pour des raisons de sécurité ; utilisez alors leur propre bloc vidéo.

Confidentialité

Le code d’intégration est généré dans votre navigateur et rien n’est envoyé où que ce soit. Votre navigateur ne charge le lecteur depuis YouTube (ou youtube-nocookie.com) que si vous cliquez sur Afficher l’aperçu.