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
18 Commentaires
L'autoplay n'est effectivement pas la meilleure solution d'un point de vue utilisateur je suis complètement d'accord là-dessus, perso ça m'a toujours rebuté.
Merci pour l'article en tous les cas.
Merci pour toutes ces infos sur les player youtube, c'est vraiment interessant.
Je ne savais pas que ces codes fonctionnaient sur le code iframe mais c'est une bonne nouvelle :)
Merci encore !
Antoon
Merci pour toutes ces infos.
Toutefois j'ai pu remarquer que certaines balises, comme color1 et color2 ne fonctionnent pas avec le nouveau lecteur (Pour passer de l'un à l'autre, remplacez le "embed" du lien en "v" et vice versa).
En tout cas, bel article ;)
Merci pour ces infos.
Etant justement en train d'étudier ces possibilités, serait-il possible d'avoir un jour le même genre de dossier détaillé sur l'intégration d'une chaîne Youtube sur un blog ou un site ?
Il existe en effet relativement peu d'informations officielles sur ce point.
D'avance merci ;-)
Beonjour Exar Kun:
Quel sorte d'intégration souhaiteriez vous ?
Je sens que tous ces customisations vont m'être bien utile pour youtube! Par contre je suis pas très favorable à l'utilisation du autoplay, qui va beaucoup gêner l'utilisation de l'internaute...
j'aurais bien aimé un bout de code ça fait 2 heures que je me bats avec de l'autodisplay=1 et de loop=1
Bonjour Stef, a quoi sert autodisplay ? Si c'est autopay que vous voulez utilisez, regardez le code source de la vidéo dans cet article.
PS pour Daniel: J’espère que tu as passé ds bonnes fêtes. La vidéo utilisant JavaScript ne fonctionne plus, sais tu pourquoi ? Je te remercie.
Oups peut etre une erreur de ma part autoplay mais ca aurait été plus simple avec un bout de code dans l'article que de regarder le code source , et comme je me suis pris la tete , j'ai fait un vlc avec un player interne ..
A l'année prochaine et meilleurs voeux ....
Pourtant, il est bien précisé qu'il faut ajouter autoplay=1 comme paramètre de vidéo :)
Bonne fêtes à vous également
Merci pour toutes ces astuces, celle pour créer des playlists est particulièrement intéressante.
@Rehvaro - j'ai pas compris le "Pour passer de l’un à l’autre, remplacez le « embed » du lien en « v » et vice versa)."
Merci pour ces astuces ...
J'ai essayé avec votre vidéo une tentative mais elle ne fonctionne guère visiblement sous Blogger, voici mes intentions: une lecture automatique et supprimer le contrôle de lecture. Voici mon code :
Où ce la cloche ? Merci
Bonjour, il y a deux différents ID dans ton code. je prend le 2e, si c'est pas bon dites le moi.
Essayez cela:
Merci, il fonctionne, j'avais trouvé entre temps ... Merci de votre aide
Je ne savais pas que l'on pouvait personnaliser l'interface Youtube. L'option Autoplay est intéressante, mais à utiliser avec modération, car c'est toujours troublant la vidéo qui se lance avant qu'on lui demande...
Bonjour,
Tout d'abord merci pour toute c'est explications !!! J'ai suivi le code qui à été donner par Benoit j'y ai changer la taille mais dès que je change le lien de la vidéo pour y mettre la mienne je me retrouve avec un écran blanc ?
- La vidéo que je voudrai mettre :
http://www.youtube.com/watch?v=rANdtGziysI
- Voici le code :
Merci pour votre aide ;-)
bonjour,
Pouvez vous copier/coller le code que vous avez essayé et qui ne fonctionne pas svp ?
merci pour ces info.
j'ai un problème. j'ai inséré une vidéo youtube sur une page web. ca joue. mais à la fin de la lecture il y a certaine vidéo en minuature qui s'affiche. ces vidéon de ne sont pas de moi. je ne veux qu'elles s'affichent. Aidez moi s'il vs plaît
Laisser un commentaire