Ok

En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies. Ces derniers assurent le bon fonctionnement de nos services. En savoir plus.

02.02.2010

Un lecteur vraiment personnalisé pour Youtube, sans feuille de styles

Au début du mois de janvier, nous voyions comment personnaliser un lecteur vidéo Dailymotion en appliquant une mise en forme enregistrée dans la feuille de styles. Si cela vous permet de ne plus avoir à taper les codes de styles, cela veut aussi dire que tous vos lecteurs vont être identiques. Plutôt que de multiplier les insertions dans la feuille de styles, vous pouvez les "passer" en direct.

D'ailleurs, vous le savez déjà, si vous avez la curiosité de regarder le code HTML de vos notes. Si vous appliquez une couleur rouge sur un mot dans votre texte, le code ressemblera à ceci.

Si vous appliquez une couleur <span style="color: #800000;">rouge</span> sur un mot dans votre texte,

Avec <Span> on crée une exception dans la feuille de styles courante, puis on déclare les styles. Rien ne nous empêche de procéder de même pour la mise en forme d'un lecteur exportable vidéo.


Voici un exemple de lecteur exportable Youtube personnalisé avec un arrière-plan faisant office de cadre. La personnalisation de base avait été abordée ici.

J'ai passablement retouché une photo du blog "Et Paris qui bat la mesure" pour obtenir cet arrière-plan à des dimensions qui me conviennent. Les photos d'origine sont très jolies, n'hésitez pas à flâner pour en prendre la mesure. Sans la battre.

Une fois mon image stabilisée, j'ai récupéré le code du lecteur Youtube, pour le clip qui m'intéressait.


Personnaliser les commandes du lecteur

Le code de l'objet ci-dessous détermine la couleur d'un filet, la couleur de référence pour le dégradé de couleur en fond de bouton. Je vous accorde que dans mon exemple ces deux couleurs sont identiques.

<object height="250" width="293" data="http://www.youtube.com/v/HsX4M-by5OY&amp;hl=fr_FR&amp;fs=1&amp;rel=0&amp;color1=0x000000&amp;color2=0x000000" type="application/x-shockwave-flash">
<param name="wmode" value="transparent" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="src" value="http://www.youtube.com/v/HsX4M-by5OY&amp;hl=fr_FR&amp;fs=1&amp;rel=0&amp;color1=0x000000&amp;color2=0x000000" />
<param name="allowfullscreen" value="true" />
</object>


Choisir le film

Quand vous visionnez un film sur YouTube, vous avez une adresse du type :
http://www.youtube.com/watch?v=HsX4M-by5OY

L'identifiant du film est HsX4M-by5OY d'ailleurs, vous le retrouvez dans le code ci-dessus.


Résumons-nous

1. Je choisis une image d'arrière plan sur laquelle je compte placer un espace de 250x293 en hxl.
2. Je crée un enchaînement de styles CSS en m'inspirant de celui-ci. L'image fait 389x364 pixels.

<div style="width: 389px;
height: 364px;
background: url(http://geemee.hautetfort.com/images/cadre-video-metro.png) no-repeat scroll 0% 0% transparent;
padding: 49px 6px 6px 48px;"></div>

3. Je copie le code du lecteur Youtube ci-dessous que je garde dans un fichier texte ou une note en mode brouillon. J'y ajoute éventuellement quelques réglages de couleur, et j'enregistre ce code qui ne bougera plus.

<object height="250" width="293" data="http://www.youtube.com/v/HsX4M-by5OY&amp;hl=fr_FR&amp;fs=1&amp;rel=0&amp;color1=0x000000&amp;color2=0x000000" type="application/x-shockwave-flash">
<param name="wmode" value="transparent" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="src" value="http://www.youtube.com/v/HsX4M-by5OY&amp;hl=fr_FR&amp;fs=1&amp;rel=0&amp;color1=0x000000&amp;color2=0x000000" />
<param name="allowfullscreen" value="true" />
</object>

4. Je crée un lecteur prêt à insérer en intégrant le code de l'objet dans le code de la division.

<div style="width: 389px;height: 364px;background: url(http://geemee.hautetfort.com/images/cadre-video-metro.png) no-repeat scroll 0% 0% transparent;padding: 49px 6px 6px 48px;">
<object height="250" width="293" data="http://www.youtube.com/v/HsX4M-by5OY&amp;hl=fr_FR&amp;fs=1&amp;rel=0&amp;color1=0x000000&amp;color2=0x000000" type="application/x-shockwave-flash">
<param name="wmode" value="transparent" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" />
<param name="src" value="http://www.youtube.com/v/HsX4M-by5OY&amp;hl=fr_FR&amp;fs=1&amp;rel=0&amp;color1=0x000000&amp;color2=0x000000" /><param name="allowfullscreen" value="true" /></object>
</div>

Si je veux partager un autre clip Youtube, je ne changerai que l'identifiant du clip, ci-dessus surligné.
5. Dans la note, j'insère un objet multimédia en sélection l'onglet "code embed".
6. Je colle le code du lecteur
7. Je modifie deux fois l'identifiant du film, si ce n'est déjà fait.
8. Je valide, et c'est prêt.

Cette méthode n'est pas tellement plus simple que la précédente. Il vous faudra tout de même trouver une image, l'adapter, peaufiner l'alignement... Mais vous pourrez changer de lecteur selon l'humeur et ou l'objet du clip sans craindre de modifier les notes existantes.

16:31 Écrit par Gee Mee dans Traitement d'image, Vidéo | Lien permanent | Commentaires (2) | Tags : lecteur, lecteur exportable, vidéo, youtube | |  del.icio.us | | Digg! Digg |  Facebook

Commentaires

Le résultat est très intéressant !
Si tu veux l'image en haute déf pour une meilleure qualité, n'hésite pas...

Écrit par : Michaël | 03.02.2010

Répondre à ce commentaire

Merci Michaël, d'accepter cette utilisation et d'y trouver un intérêt. C'est très sympathique aussi de mettre l'original à ma disposition, mais compte tenu de la taille finale, ce n'est pas très utile. Ce sont les "étirements" que j'ai imposé à l'image qui ont dégradé sa qualité.

Et j'en profite pour inviter encore une fois mes lecteurs à te visiter.

Écrit par : Gee Mee | 04.02.2010

Les commentaires sont fermés.