Pimp My Player
A t-on besoin aujourd'hui encore de présenter YouTube ?
Probablement que non.
Aujourd'hui, YouTube est la plus grande plate-forme au monde de partage de vidéos avec plusieurs centaines de millions de vidéos visionnées chaque jour.
Pour amplifier donc ce partage, YouTube a donc lancé en aout 2005, un lecteur que l'on peut afficher sur un site, un forum, un blog.
Ce même lecteur embarqué à subi une mise à jour importante au mois de juin dernier.
Il a introduit quelques nouveautés dont des possibilités de personnalisation.
Je vais donc maintenant vous montrer comment personnaliser votre Lecteur YouTube embarqué. Tout le long de ce tutoriel, j'ai utilisé différentes videos: cela n'affecte en aucun cas les manipulations et permet de vous montrer quelques vidéos que vous ne connaissez peut être pas. En tout cas, c'est un peu moi rébarbatif que de voir cinq fois la même vidéo
Voici ici le lecteur d'origine :
Il est dans les tons gris, sans bordure supérieure ni latérale, et sur sa partie inférieure, on retrouve les quelques commandes. Par défaut, lorsque l'on clique sur menu, on obtient une liste de vidéos ayant des tags similaires à celle visionnée.
Voici donc maintenant les diverses modifications que l'on peut apporter au lecteur YouTube embarqué.
Tout d'abord les pré-requis :
Voici à quoi ressemble le code pour afficher le lecteur sur un blog/site/forum. (Le HTML doit être activé, le cas échéant un BBcode peut le remplacer mais cela ne devrait en rien changer la manipulation.)
dans ce code il faut dicerner le segment de code variable en fonction des vidéos et le segment de code fixe qui est invariant.
Le segment variant du code est facile à reconnaître, on le retrouve à deux reprises dans le code et est constitué d'une suite de chiffres et de lettres sans aucune signification particulière. il se situe après les deux http://www.youtube.com/v/, pour les yeux de lynx vous aurez remarqué que le segment variable se retrouve aussi dans l'url de la vidéo.
Soit dans notre exemple : 3wD3o5m6t5I
Toutes les modifications du lecteur se font sur la seconde ligne de code variable par simple ajout au bout de se segment. Il ne faut donc en aucun cas insérer quelque chose au milieu.
Normalement la vidéo est en contact direct avec sans environnement externe comme on a pu le voir plus haut. Ajoutons lui maintenant un cadre :
Comme vous le voyez là, je viens d'ajouter un cadre tout autour du lecteur. Pour ce faire rien de plus simple, il suffit d'ajouter &border=1 à la fin du segment de code variable à modifier; en reprenant notre exemple d'en haut on obtient:
Voila, votre lecteur possède maintenant une bordure ! Passons maintenant à la modification suivante.
Initialement le lecteur embarqué de YouTube est gris, avec un petit dégradé vers le blanc. C'est une couleur sobre qui convient en général à tout le monde. Sauf que certains aiment être un peu plus originaux et préfèrent modifier sa couleur. La couleur étant un dégradé, il y a deux codes hexadécimaux à entrer. Si vous ne connaissez pas le code hexadécimal de la couleur que vous souhaitez utiliser, je vous laisse suivre ce lien pour obtenir les codes nécessaires.
Pour modifier la couleur de lecteur il vous faudra ajouter le code &color1=0x******&color2=0x******, il faudra évidement remplacer les étoiles par le code hexadécimal correspondant. Le premier code couleur correspond à la couleur supérieure et le second à la couleur inférieure du dégradé.
Voici le résultat obtenu avec Vert (00FF00) et du du Orange (FFA500).
Ce segment de code, permet aussi de modifier la couleur du cadre, avec &color1=0x00FF00&color2=0xFFA500&border=1
Toujours avec notre premier exemple on obtient pour avoir le même résultat ces lignes de code :
On peut aimer le résultat ou pas, il faut ensuite en fonction des goûts faire varier les deux couleurs du dégradé.
Maintenant votre lecteur est équipé d'un cadre et d'un nouveau dégradé, il est temps de passer à la prochaine customisation.
Comme je vous l'ai fait remarqué plus haut, en cliquant sur menu ou a la fin de la vidéo, le lecteur vous propose initialement une liste d'un quinzaine de vidéos ayant des similarités plus ou moins visibles suivant les vidéos proposés. YouTube les génère généralement via les tags respectifs de ces vidéos.
Si pour une raison ou une autre, vous ne souhaitez pas que d'autres vidéos soit proposées dans le menu ou à la fin de la vidéo, il vous suffira d'ajouter ce segment de code &rel=0, toujours au même endroit, après le segment variable.
Voici le résultats avec les 3 customisations ensemble.
Si vous laissez se terminer la vidéo, ou que vous cliquez sur menu, vous verrez qu'il n'y a plus d'autres vidéos proposées.
Toujours avec le code du départ voici ce que cela donne:
Voila donc enfin les 3 modifications que vous pouvez effectuer avec les vidéos que vous voulez.
Un petit résumé pour la route :
- &border=1 : ajouter un cadre au lecteur
- &color1=0x******&color2=0x****** : modifier la couleur du lecteur et de son cadre
- &rel=0 : retirer les liens vers des vidéos apparentées
La rubrique suivante concerne principalement les uploadeurs de YouTube , puisque le lecteur que je vais vous présenter est associé à un compte ainsi qu'aux vidéos qui ont été envoyées sur YouTube via ce compte.
Voici un petit aperçu :
Comme vous pouvez le voir, ce lecteur personnalisé n'affiche que les vidéos que j'ai uploadé, soit deux petites vidéos. Si vous êtes assez curieux pour y jeter un coup d'oeil, vous trouverez, un trip entre potes lors du dernier jour de cours lors de mon année de 1ère et une vidéo de FrontRaw Léopard pour notre test de Mac OS X V10.5 Léopard
Si vous avez donc un compte YouTube avec plusieurs vidéos uploadées et que vous souhaitez les partager, voici la procédure à suivre :
- Allez sur YouTube et connectez vous à votre compte
- En haut à droite cliquez sur "Compte"
- Ensuite dans la colonne "Gérer mes vidéos" cliquez sur "Lecteurs vidéo personnalisés"
Si vous en avez déjà un, il est normalement affiché, si vous n'en avez pas, vous pouvez en créer un, en cliquant sur "créer un lecteur personnalisé".
Un fois cela fait, vous donnez un nom et si vous le souhaitez une description à ce lecteur personnalisé. Juste après, YouTube vous propose 7 types de colorations pour votre lecteur. Malheureusement, contrairement au lecteur embarqué simple, aucune des modifications citées en première partie ne fonctionne.
Ensuite vous avez le choix entre deux types de lecteurs: un lecteur avec une apparence simple, comme celui montré en 1ère partie ou alors un lecteur comme celui juste au dessus avec un écran a gauche et les vidéos disponibles pour le lecteur à droite.
Pour ce qui est du contenu de ce lecteur vous avez le choix entre proposer toutes vos vidéos uploadées dans ce lecteur ou seulement quelque unes d'entre elles.
Enfin pour finir cliquez sur générer le code pour obtenir votre lecteur et cliquez ensuite sur terminer pour enregistrer votre lecteur personnalisé.
Vous voila donc équipé pour partager toutes les vidéos que vous souhaitez avec les personnes que vous souhaitez
Pour clore ce sujet, voici une petite annexe qui vous expliquera comme créer un BBcode pour forum IPB qui permettra a vos membres poster des messages avec le lecteur de YouTube intégré sans pour autant leur fournir l'autorisation d'écriture avec du HTML.
Vous allez voir c'est assez simple.
Tout d'abord, entrez dans le PC Admin, rejoignez la section "Management" puis dans la colonne de gauche "Add new BBcode"
Une fois sur la page :
Donnez lui un titre, exemple : YouTube
Une description : A vous de voir
Un exemple d'utilisation du BBcode :
le tag du BBcode : youtube
Enfin la partie intéressante le code du BBcode :
{content} sera remplacer lors de l'utilisation du BBcode, par les utilisateurs
Pour l'utiliser maintenant, il faudra tout simplement mettre entre les deux balises [ youtube], le segment de code variable que l'on retrouve dans l'url de la page de la video.
http://fr.youtube.com/watch?v=dMKXNjuQRRA ----> dMKXNjuQRRA
Et voila le tour est joué, vos membres pourront maintenant poster des vidéos de YouTube directement !
NB: Une manip similaire est aussi possible avec Dailymotion ect ...
Ps: Vous remarquerez dans la 1ère vidéo la prestation plus que spectaculaire de Nicolas Gary de PC INpact ....