Aller au contenu


Customisez votre lecteur YouTube embarqué


  • Vous ne pouvez pas répondre à ce sujet
7 replies to this topic

#1 Kyro

Kyro

    Serious Admin

  • Administrateur
  • PipPipPipPipPipPipPipPipPip
  • 8 410 Messages :
  • Gender:Male
  • Location:Grenoble

Posté 22 décembre 2007 - 22:08

Customisez votre lecteur Youtube !

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 clindoeil.gif

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

CODE
<object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/3wD3o5m6t5I"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/3wD3o5m6t5I" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object>


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.



Ajouter un cadre au lecteur



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:


CODE
<object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/3wD3o5m6t5I"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/3wD3o5m6t5I&border=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object>



Voila, votre lecteur possède maintenant une bordure ! Passons maintenant à la modification suivante.



Modifier la couleur lecteur



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 :

CODE
<object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/3wD3o5m6t5I"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/3wD3o5m6t5I&color1=0x00FF00&color2=0xFFA500&border=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object>


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.



Proposer d'autre vidéo ayant un lien avec vidéo initiale


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:

CODE
<div align="center"><object width="425" height="373"><param name="movie" value="http://www.youtube.com/v/3wD3o5m6t5I&rel=1&color1=0x3a3a3a&color2=0x999999&border=1"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/3wD3o5m6t5I&rel=0&color1=0x00FF00&color2=0xFFA500&border=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="373"></embed></object></div>



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




Le lecteur personnalisé via Youtube




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 yes.gif






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 clindoeil.gif
Un exemple d'utilisation du BBcode :
CODE
[youtube]3wD3o5m6t5I[youtube]

le tag du BBcode : youtube

Enfin la partie intéressante le code du BBcode :

CODE
<div align="center"><object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/{content}"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/{content}" type="application/x-shockwave-flash" wmode="transparent" width="425" height="373"></embed></object></div>


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

#2 CaseyN

CaseyN

    sudo apt-get install OS X

  • Administrateur
  • PipPipPipPipPipPipPipPipPip
  • 3 630 Messages :
  • Gender:Male
  • Location:Jamais très loin

Posté 22 décembre 2007 - 22:40

La boite à Kikoo yes.gif Le pire c'est qu'il est comme ça en vrai transpi.gif

Question : Comment qu'on fait pour mettre les cadres etc dans le BBcode, nous?

Un système, ce sont les logiciels qui le font

 

Le plus grand danger est l'interface chaise-clavier

 

Mon Blog - Mon Tumblr - Mon FlickR - Mon Twitter


#3 Kyro

Kyro

    Serious Admin

  • Administrateur
  • PipPipPipPipPipPipPipPipPip
  • 8 410 Messages :
  • Gender:Male
  • Location:Grenoble

Posté 22 décembre 2007 - 22:44

C'est marqué en haut : c'est pareil pour le cadre clindoeil.gif

sauf que comme on a déjà notre player custom via le BBcode le rendu n'est pas top pour le cadre avec la couleur qu'on à choisis clindoeil.gif

#4 CaseyN

CaseyN

    sudo apt-get install OS X

  • Administrateur
  • PipPipPipPipPipPipPipPipPip
  • 3 630 Messages :
  • Gender:Male
  • Location:Jamais très loin

Posté 22 décembre 2007 - 22:50

J'ai pas compris ta phrase transpi.gif

Un système, ce sont les logiciels qui le font

 

Le plus grand danger est l'interface chaise-clavier

 

Mon Blog - Mon Tumblr - Mon FlickR - Mon Twitter


#5 Kyro

Kyro

    Serious Admin

  • Administrateur
  • PipPipPipPipPipPipPipPipPip
  • 8 410 Messages :
  • Gender:Male
  • Location:Grenoble

Posté 22 décembre 2007 - 22:56

pour ajouter une bordure via le BBcode : ajoute &border=1 en plus de l'adresse de la vidéo clindoeil.gif

mais sous infomars t'aura pas un bon rendu clindoeil.gif

#6 CaseyN

CaseyN

    sudo apt-get install OS X

  • Administrateur
  • PipPipPipPipPipPipPipPipPip
  • 3 630 Messages :
  • Gender:Male
  • Location:Jamais très loin

Posté 22 décembre 2007 - 23:13

Ok thanks chinois.gif

Un système, ce sont les logiciels qui le font

 

Le plus grand danger est l'interface chaise-clavier

 

Mon Blog - Mon Tumblr - Mon FlickR - Mon Twitter


#7 Transonic

Transonic

    Touriste Martien

  • Zimien
  • PipPipPipPipPip
  • 226 Messages :
  • Gender:Male

Posté 23 décembre 2007 - 21:44

Long a lire mais moi je ferai le lecteur classique mais j'ai vu que quand on mettait une video la couleur est faite toute seule :-)

#8 Kyro

Kyro

    Serious Admin

  • Administrateur
  • PipPipPipPipPipPipPipPipPip
  • 8 410 Messages :
  • Gender:Male
  • Location:Grenoble

Posté 23 décembre 2007 - 21:45

ouai ça c'est moi qui l'ai fais, c'est plus style et en plus ça permet via le bbcode aux utilisateurs non admin de poster directement des videos biggrin.gif



0 utilisateur(s) en train de lire ce sujet

0 membre(s), 0 invité(s), 0 utilisateur(s) anonyme(s)