Intégrer le lecteur

Intégrer une vidéo YouTubeTM dans un article est assez simple puisque le code d'intégration est donné par YouTube. Le code se trouve sous chaque vidéo en cliquant sur Partager puis Intégrer. Il suffit de le copier et de le coller en mode HTML dans l'éditeur d'articles.

code d'intégration sur YouTube

YouTube proposait auparavant un autre type de code de type object affichant un lecteur adobe flash player. Le nouveau code est celui d'un iframe, cadre qui affiche le lecteur adapté aux capacités du client et les formats de fichiers YouTube disponibles dit la plateforme de videos (cf Google developers), c'est-à-dire soit le lecteur flash, soit le lecteur vidéo HTML5. Cela permet de résoudre les problèmes d'affichage sur les appareils ne supportant pas la technologie flash et de profiter du lecteur HTML5 supporté nativement sur les dernières versions des navigateurs.

L'identifiant de la vidéo apparaît après "embed/".

<iframe width="360" height="315" src="https://www.youtube.com/embed/V061fpjcunI" frameborder="0" allowfullscreen></iframe>

Personnaliser le lecteur

Le code fourni par youtube est modifiable. On commencera souvent par les valeurs width pour la largeur et height pour la hauteur. Il existe d'autres paramètres fort intéressants à modifier pour personnaliser le lecteur.

Paramètre color

Pour aller plus loin, YouTube propose en effet plusieurs paramètres à ajouter après l'adresse de la vidéo. Il suffit d'ajouter un point d'interrogation puis d'écrire le nom du paramètre et sa valeur. On peut par exemple changer la couleur de la barre de progression ; 'seulement) deux couleurs sont proposées : rouge (red, couleur par défaut) et blanc : color=white.

<iframe width="360" height="315" 
src="https://www.youtube.com/embed/V061fpjcunI?color=white"></iframe>

Barre de progression blanche :

Barre de progression rouge :

Note: depuis août 2015, le lecteur YouTube a changé de thème avec une barre de contrôle transparente.

Autres paramètres

D'autres paramètres sont proposés par YouTube pour contrôler les informations affichées ou les fonctions de YouTube :

  • Paramètre rel : 1 (par défaut) pour afficher les vidéos similaires à la fin de la vidéo, 0 pour ne pas les afficher
  • Paramètre showinfo : 1 (par défaut) pour afficher le titre de la vidéo et l'utilisateur l'ayant mis en ligne, 0 pour ne pas les afficher
  • Paramètre cc_load_policy : 0 pour forcer l'affichage des sous-titres.
  • Paramètre iv_load_policy : 1 (par défaut) pour afficher les annotations sur la vidéo, 3 pour ne pas les afficher (ne concerne pas les annonces publicitaires mais aux textes cliquables ajoutés par les propriétaires de la vidéo)
  • Paramètre loop : 1 pour lire la vidéo en boucle, sinon 0 (par défaut)
  • Paramètre fs 1 (par défaut) pour afficher le bouton plein écran, 0 pour ne pas l'afficher
  • Paramètre hl : langue de l'interface (exemple libellé "désactiver le son"). Par défaut celle du pays. Pour forcer l'affichage d'une autre langue, passer la langue sur deux lettres : "fr" pour français, "en" pour anglais, "es" pour espagnol.
  • Paramètre autoplay : 1 pour démarrage automatique - fortement déconseillé car cela gêne le visiteur (0 par défaut).
  • Paramètre start : position de départ en secondes (0 par défaut). end permet de définir la position de fin (l'utilisateur pouvant débloquer le marqueur de fin).
  • Paramètre controls : 1 (par défaut) pour afficher la barre de progression et les boutons de contrôles, 0 pour les masquer (la valeur 2 permet de charger les contrôles seulement au lancement de la vidéo).
  • Paramètre modestbranding : 1 pour masquer le logo YouTube. 0 (par défaut) pour l'afficher (sans effet si paramètre color=white ou showinfo=0).

La liste des paramètres commence par un point d'interrogation et les paramètres sont séparés par &amp;. L'ordre des paramètres n'a pas d'importance.

L'intégration de ces paramètres peut donner ceci :

<iframe width="360" height="315" 
src="https://www.youtube.com/embed/V061fpjcunI?rel=0&amp;showinfo=0&amp;iv_load_policy=3&amp;hl=es"></iframe>

On voit que le titre de la vidéo les annotations ont disparu et les bulles d'aide sont en espagnol. Dans les exemples suivants, les autres paramètres sont utilisés.

Playlist et mini-playlist

YouTube propose aussi le code d'intégration pour les playlists créées sur YouTube. Le code est à trouver sous la vidéo de la playlist en cours de lecture. Les paramètres précédemment présentés s'appliquent aussi. Le code correspond en effet à la vidéo courante suivie des vidéos de la playlist dont l'identifiant est renseigné dans le paramètre list. Exemple :

<iframe width="853" height="480" 
src="https://www.youtube.com/embed/LLGnA-yWkto?list=PL9BobeB91oBFtwEv_ynMPHIi5A-a1yIRF&amp;color=white"></iframe>

Une fonction intéressante est la possibilité de proposer plusieurs vidéos dans le lecteur sans créer une playlist sur YouTube. Pour cela, il faut récupérer l'identifiant de chaque vidéo, identifiant qui se trouve dans le code d'intégration ou dans l'adresse de la vidéo. Exemple : id = OPf0YbXqDm0 pour https://www.youtube.com/watch?v=OPf0YbXqDm0

On crée la mini-playlist avec le paramètre playlist suivi d'un identifiant d'une vidéo ou d'une série d'identifiants séparés par une virgule. Exemple :

<iframe width="350" height="315" src="https://www.youtube.com/embed/nCkpzqqog4k?start=30&amp;modestbranding=1&amp;playlist=OPf0YbXqDm0,lp-EO5I60KA"></iframe>

Ce qui donne un lecteur avec trois vidéos (la vidéo initialement intégrée plus deux vidéos dans le paramètre "playlist") :

Autre possibilité : proposer des vidéos selon une recherche par mot-clé sur YouTube (utile avec un mot-clé très spécifique) grâce aux paramètres listType et list. Exemple une vidéo de Madonna suivie des vidéos répondant à la recherche sur le mot "Madonna"

<iframe width="350" height="315" 
src="https://www.youtube.com/embed/u9h7Teiyvc8?listType=search&amp;list=madonna"></iframe>

Pour finir, pour proposer les vidéos ajoutés par un utilisateur, préciser listType=user_uploads et le nom d'utilisateur dans le paramètre list. Exemple avec l'utilisateur MrMovieSoundtracksHD

<iframe width="350" height="315" 
src="https://www.youtube.com/embed/V061fpjcunI?controls=2&amp;autohide=0&amp;listType=user_uploads&amp;list=MrMovieSoundtracksHD"></iframe>

Utilisation au quotidien

Il serait fastidieux de modifier à chaque fois le code proposé par Youtube pour intégrer une vidéo avec les options de son choix. Selon ses besoins, on choisit les options à utiliser pour chaque intégration de vidéo et on enregistre le code dans un petit fichier texte. Pour intégrer une nouvelle vidéo, il suffit de changer l'identifiant de la vidéo qui se trouve dans dans le code d'intégration ou dans l'adresse de la vidéo :

<iframe width="360" height="315" 
src="https://www.youtube.com/embed/V061fpjcunI?rel=0&amp;showinfo=0&amp;iv_load_policy=3&amp;fs=0&amp;hl=es&amp;start=30"></iframe>

Liste complète des paramètres sur https://developers.google.com/youtube/player_parameters