Videos de YouTube en Haute Qualite

Pour insérer un lecteur YouTube, il suffit d'insérer un tag iframe, selon les indications données par Youtube. Les paramètres du lecteur peuvent être spécifiés, selon les indications de la documentation. L'insertion par un tag iframe, permet la lecture d'une video sur une tablette (iPad) ne supportant pas le format Flash.

Il est possible d'utiliser un Gadget Google. Le code du gadget peut être placé dans le html du message, ou dans un gadget HTML / Javascript. Les paramètres peuvent être précisés simplement, selon les indications données sur la page du Gadget YouTube.

Par exemple, j ai inséré ci-dessous la vidéo d'un dégustation du Château de Châtagneréaz Grand Cru 2010. Le lecteur est clair, le curseur blanc, la taille 425 x 264, la qualité haute et les contrôles ne s'affichent pas pendant le visionnage.





Le code html à insérer (à saisir sans espaces ni retour à la ligne) : 

<iframe style="width: 430px; height: 270px;"
src="http://www.gmodules.com/gadgets/ifr?url=http://prac-gadget.googlecode.com/files/youtube-player.xml
&up_Video=pIeXrj86F3w
&up_Taille=425 x 264
&up_Qualite=HQ720
&up_Theme=Clair
&up_Curseur=Blanc
&up_Plein=Oui
&up_Videosim=Non
&up_Demarrage=Non
&up_Controle=Sans
&up_BCOL=%23558866
&up_CCOL=%23eeeecc"
allowTransparency="true" frameborder="0" scrolling="no">
</iframe>

---

Important :  mise à jour d'avril 2012

Les informations ci-dessous sont obsolètes suite à différentes mises à jour de l'API Youtube

---

Depuis fin 2008, YouTube permet d'enregistrer et de visionner des vidéos en Haute Qualité.

Les formats disponibles :



Visionner une vidéo en Haute Qualité

Pour visionner en Haute Qualité la Vidéo : Dance - Where the Hell is Matt?(2008), il faut indiquer l'adresse normale d'une vidéo YouTube, suivie du paramètre fmt=22 :

http://www.youtube.com/watch?v=zlfKdbWwruY&fmt=22

Insérer une vidéo en Haute Qualité sur son Blog

YouTube fournit le code suivant à insérer sur son blog (à insérer sans retour à la ligne) :

<object width="445" height="284">
<param name="movie"
value="http://www.youtube.com/v/zlfKdbWwruY
&hl=fr
&fs=1
&color1=0x234900&color2=0x4e9e00&border=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed
src="http://www.youtube.com/v/zlfKdbWwruY
&hl=fr
&fs=1
&color1=0x234900&color2=0x4e9e00&border=1"
type="application/x-shockwave-flash"
allowscriptaccess="always" allowfullscreen="true"
width="445" height="284">
</embed>
</object>

L'ajout du paramètres fmt=22 ne permet pas d'insérer la version Haute Qualité de la vidéo sur son blog !
Pour celà il faut ajouter un paramètre caché : ap, avec le paramètre fmt=22 URLEncodé . Ce qui donne :

ap=%2526fmt%3D22

Le code à insérer sur le blog devient donc (toujours sans retour à la ligne) :

<object width="445" height="284">
<param name="movie"
value="http://www.youtube.com/v/zlfKdbWwruY
&ap=%2526fmt%3D22
&hl=fr
&fs=1
&color1=0x234900&color2=0x4e9e00&border=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed
src="http://www.youtube.com/v/zlfKdbWwruY
&ap=%2526fmt%3D22
&hl=fr
&fs=1
&color1=0x234900&color2=0x4e9e00&border=1"
type="application/x-shockwave-flash"
allowscriptaccess="always" allowfullscreen="true"
width="445" height="284">
</embed>
</object>

On obtient le résultat suivant (lecteur 356 x 228, bordure verte, texte français) : 

Dancing - Video YouTube Haute Qualité (fmt=22)

En cas de problèmes

YouTube affiche le message suivant : Désolé, cette vidéo n'est plus disponible (We're sorry, this video is no longer available) si la vidéo n'est pas disponible dans le format indiqué ou si la bande passante est trop faible pour le niveau de qualité demandé. Certains pare-feux limitent également le visionnage en Haute Qualité.


Insérer la Video avec un tag iframe

YouTube autorise depuis juillet 2010 l'insertion d'une video avec un simple tag iframe. L'exemple ci-dessus donne le code html :

<iframe width="445" height="284"
src="http://www.youtube.com/v/zlfKdbWwruY&ap=%2526fmt%3D22&hl=fr&fs=1&color1=0x234900&color2=0x4e9e00&border=1" frameborder="0">Video de youtube</iframe>

Un gadget pour insérer une Video YouTube

Google a développé une API comportant un lecteur Flash. Le gadget suivant utilise ce lecteur et évite l'insertion des codes <object> et <embed> pour afficher un lecteur YouTube sur son blog.

youtube-player.xml

Insérer le Gadget Google lecteur YouTube

Blogger permet facilement l'ajout d'un Gadget dans les éléments de la page : Mise en page / Eléments de la page / Ajouter Gadget / Ajouter votre propre (... Gadget) et saisir l'Url du Gadget à insérer.

Rien n'est prévu pour ajouter un Gadget dans le corps du message. Il faut utiliser la technique décrite dans un message précédent.

Les paramètres du Gadget :

Video : Le code de la Video YouTube, zlfKdbWwruY dans l'exemple ci-dessus
Taille : En pixels, 223 x 142, 425 x 264, 480 x 295, 560 x 345, 640 x 385, 848 x 500 (223 x 142 force Bordure à non)
Couleurs : gris blanc, noir gris, bleu gris, bleu, vert, orange, rose, violet, rouge
Bordure : oui ou non
Recherche : Grille de recherche YouTube, oui ou non (oui n'est valide que si Videosim est à oui)
Videosim : Videos similaires à la fin de la vidéo, oui ou non
Démarrage : Automatique lors de l'affichage de la page, oui ou non
Qualite : Normal, Haute, Haute (iPod), Très Haute
Plein : oui ou non, autoriser l'affichage plein écran
BoxBcol : Code #rrggbb couleur du fond

Note : Indiquer une taille pour le gadget en fonction de la taille choisie pour la Vidéo (par défaut, 860 x 520)

La comparaison




YouTube - Qualité Normale


YouTube - Qualité Très haute

Plus d'informations

Le Player de YouTube dans un message du Blog

Des Gadgets pour son Blog

Les Actualités sur YouTube, avec un Google Web Elements

Utiliser Le lecteur YouTube avec Google Sites