webleads-tracker

WordPress & Référencement naturel
Mes servicesWordPress - Référencement
Hébergement WordPress
Vous êtes ici : SeoMix » Web » Développement & ergonomie » Customisez le player Youtube

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.

Deux sortes de code

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.

Get the Flash Player to see the wordTube Media Player.

Bon "export de vidéo" :)

Benoit, SEO Manager Hotels.com

18 commentaires
  1. Nicolas
    1 message

    Nicolas - Le 12 décembre 2011, 09:33

    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.

  2. Antoon
    2 messages

    Antoon - Le 12 décembre 2011, 14:36

    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

  3. Rehvaro
    1 message

    Rehvaro - Le 12 décembre 2011, 21:45

    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 ;)

  4. Exar Kun
    2 messages

    Exar Kun - Le 13 décembre 2011, 11:35

    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 ;-)

  5. Benoit Chanu
    20 messages

    Benoit Chanu - Le 13 décembre 2011, 17:42

    Beonjour Exar Kun:
    Quel sorte d’intégration souhaiteriez vous ?

  6. Shinobi
    1 message

    Shinobi - Le 14 décembre 2011, 18:21

    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…

  7. stef
    5 messages

    stef - Le 27 décembre 2011, 15:55

    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

  8. Benoit
    20 messages

    Benoit - Le 29 décembre 2011, 21:29

    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.

  9. stef
    5 messages

    stef - Le 30 décembre 2011, 10:11

    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 ….

  10. Benoit
    20 messages

    Benoit - Le 30 décembre 2011, 20:31

    Pourtant, il est bien précisé qu’il faut ajouter autoplay=1 comme paramètre de vidéo :)
    Bonne fêtes à vous également

  11. Webncie
    1 message

    Webncie - Le 17 janvier 2012, 10:51

    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). »

  12. De Passage
    2 messages

    De Passage - Le 12 février 2012, 13:49

    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 :

    <iframe allowfullscreen="" autohide="1" autoplay="1" frameborder="0" height="344" src="http://www.youtube.com/embed/m3dV8a0MZ7g?fs=1" width="459"></iframe>
    <iframe width="459" height="344" src="http://www.youtube.com/embed/qo1IQeL41Tk?fs=1" frameborder="0" allowFullScreen="0" autoplay="1" autohide="1" controls="0"></iframe>

    Où ce la cloche ? Merci

  13. Benoit
    20 messages

    Benoit - Le 13 février 2012, 19:04

    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:

    <object width="420" height="315"><param name="movie" value="http://www.youtube.com/v/qo1IQeL41Tk?version=3&hl=fr_FR&autoplay=1&controls=0&autohide=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/qo1IQeL41Tk?version=3&hl=fr_FR&autoplay=1&controls=0&autohide=1" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>
  14. De Passage
    2 messages

    De Passage - Le 13 février 2012, 21:03

    Merci, il fonctionne, j’avais trouvé entre temps … Merci de votre aide

  15. nesk
    2 messages

    nesk - Le 30 mars 2012, 09:27

    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…

  16. Grégory
    1 message

    Grégory - Le 19 avril 2013, 15:54

    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 ;-)

  17. Benoit
    20 messages

    Benoit - Le 22 avril 2013, 11:02

    bonjour,

    Pouvez vous copier/coller le code que vous avez essayé et qui ne fonctionne pas svp ?

  18. Riopse
    1 message

    Riopse - Le 22 avril 2013, 20:19

    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

» Commentez cet article !
(Merci de donner un vrai prénom)
(Ne sera jamais publié)
(Modèration subjective)
Html accepté <a> <i> <b> [codesyntax]CODE[/codesyntax]
» Prévisualisez votre message

© 2010-2012 SeoMix : WordPress & Référencement
Propulsé par WordPress et Daniel Roch. Logo créé par Willy-Bahuaud

Indispensable
WordPress
A propos de SeoMix
Mes servicesWordPress - Référencement
Suivez-nous !
  • 8811 abonnés
  • 197 articles
  • 4605 messages
Vous devriez lire
Seo et emarketing
Les amis
898ed2e22c62e5e7a2e26ea882875ba5DDDDDDDDDDDDDDDDDDDDDDDD