Customisez le player Youtube

Comme tout le monde le sait, il est possible d’exporter la plupart des vidéos de Youtube sur un site tiers (sauf si le dépositaire de la vidéo refuse). Pour faire cela, rien de plus simple, vous copiez/collez le code fournit par Youtube pour son player. Il est possible de faire quelques personnalisations à ce lecteur. Rien de révolutionnaire, mais cela peut s’avérer utile dans certaines cas.

Deux sortes d'exports pour Youtube

Il existe deux sortes de code pour exporter votre lecteur : l’ancien embed et le nouveau en mode iframe. D'un point de vue technique, il n'y a pas de différence entre les deux.

Pour pouvoir customiser votre lecteur, vous devez tout simplement ajouter un attribut ainsi que sa valeur dans le code. Dans le code précédent par exemple, les attributs utilisés sont color1, autoplay, rel, ....

Les attributs pour customiser le player Youtube

autohide --> Permet de contrôller la barre du player. Si vous souhaitez que celle-ci reste visible pendant toute la durée dans le vidéo autohide=0 en revanche si vous voulez que la barre se retire au bout de deux secondes de vidéos autohide=1.

autoplay --> Permet de jouer la vidéo la vidéo des le chargement de cette derniere. Cela peut être une solution si vous voulez augmenter le nombre de vue de votre vidéo, moins idéal pour l'expérience client. Ajouter autoplay=1. Exemple avec cette vidéo:

controls --> Ce paramètre n'est pas très utile d'un point expérience utilisateur. Si vous rentrez controls=0 vous enlevez à votre lecteur la possibilité de gérer la vidéo.

enablejsapi Cet attribut permet d'activer l'API Javascipt de Youtube. Si vous souhaitez utiliser cette dernière, la valeur doit être égale à 1. (voir plus loin)

fs --> Lorsque vous exportez une vidéo, votre utilisateur peut mettre cette dernière en mode grand écran. Si vous voulez que votre lecteur regarde la vidéo et qu'en même temps qu'il ait un oeil sur vos publicités ou tout simplement que ces boutons prennent trop de place selon vous (exemple plus loin avec la chanson), vous avez pouvez tout simplement renseigner fs=0.

iv_load_policy youtube permet aux propriétaires d'ajouter des annotations sur leur vidéos. Il arrive parfois que ces dernières soient utilisées à mauvaise escient et gonfle le ration de publicité. Pour les enlever: iv_load_policy=3.

loop Si vous souhaitez que la vidéo soit rejouée automatiquement à la fin &loop=1 modestbranding --> Si vous souhaitez enlever le logo Youtube situé en bas à droite, entre la valeur 1 modestbranding=1.

playlist Si vous souhaitez diffuser plusieurs vidéos à la suite, rentrez l'ID des différentes vidéos que vous souhaitez diffuser et séparez les avec un point virgule. Pour faire plus simple, vous pouvez également directement créer une playlist et la partager.

rel Si vous ne souhaitez pas faire apparaitre les vidéos relatives à la fin dans le player Youtube, utilisez rel=0 dans vos paramètres.

showinfo Si cette dernière est désactivée, aucune information relative à la vidéo ne sera diffusée (nom de la vidéo, pseudonyme de l'utilisateur, etc). showinfo=0.

showsearch Permet de faire sauter la barre de recherche youtube qui est intégrée dans la vidéo. showsearch=0.

startSi vous souhaitez faire démarrer votre vidéo à un moment précis, vous avez la possibilité de renseigner la seconde à partir de laquelle vous souhaitez commencer. Si vous souhaitez sauter la première minute de la vidéo start=60

Theme theme=light pour une barre grisée ou theme=dark pour une barre noire.

Longueur et largeur: height width Classique HTML, j'imagine que nous n'apprenons rien à personne ;) Si vous possédez un blog musical et que vous le faisiez vivre grâce aux widgets de Deezer, vous savez que les chansons exportées ne durent plus maintenant que 30 secondes. La plupart de ces musiques se trouvent sur Youtube alors pourquoi pas ne pas en profiter ? Si vous souhaitez par exemple diffuser un album, créez votre playlist et minimiser votre lecteur (width="200" height="25"). Un example avec une chanson de Led Zeppelin:

border --> ajouter un cadre au lecteur. boder=1 par exemple

color1, color2 --> modifier la couleur du lecteur et de son cadre. Vous devez rentrez les codes couleurs que vous souhaitez.

Dans cet exemple, color1=0xFF0000 et color2=0xf8af18. Il est possible d'obtenir les codes couleurs utilisés sur des sites avec le plug-in firefox Colorzilla. Si les cadres de Youtube ne vous plaisent pas, vous avez toujours la possibilité d'insérer une image si vous le souhaitez. Ne souhaitant pas touché à la feuille de style de Seomix, voici un petit exemple via un tableau HTML (j'ai pas cherché à faire du design).

L'API Youtube

Si vous souhaitez personnaliser davantage vos vidéos, vous avez la possibilité d'utiliser l'API de Youtube. La liste des possibilités offertes est assez longue. Un exemple: si vous souhaitez offrir la possibilité à vos lecteurs de vous rendre à une partie de la vidéo simplement en cliquant sur un bouton, vous pouvez utiliser Seek-To de l'API JavaScript. Voici un exemple basique si vous possédez un site de résumé de rencontres sportives. Cliquez sur un des boutons.

//

//

Bon "export de vidéo" :)

Benoit, SEO Manager Hotels.com