Message des administrateurs

Ce blog est le prolongement, le complément du Groupe d'aide Blogger en français. Vous pourrez y trouver, au fur et à mesure qu'ils seront reproduits ici, les conseils donnés au fil des messages sur le Groupe. C'est une simplification pour vos recherches d'aide sur les blogs de Blogger. Vous êtes cordialement invités à participer à cette compilation. Pour ce faire, il vous suffit de m'adresser un mail à cette adresse et dans les meilleurs délais, nous nous efforcerons de changer votre inscription afin que vous puissiez intervenir. Comme il s'agit d'un blog, vous pourrez également laisser vos commentaires - toujours les bienvenus - pour améliorer tant le contenu que le contenant.


Groupe d'aide Blogger en français

Google Groupes
Abonnez-vous au groupe Aide Nouveau Blogger en français
E-mail :
Visiter le groupe

mardi 30 décembre 2008

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.



Ajouter ce Gadget à Google


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>



YouTube - Dégustation Châtagneréaz





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 :

Les formats YouTube

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 :



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







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

9 commentaires:

Dag a dit…

Salut
tout d'abord merci pour tous ces conseils et astuces c'est vraiment une bonne initiative.
Je savais pas ou joindre une personne qui s'y connaitrait bien en blogger alors jte laisse un comm ici^^
Voila moi j'ai un probleme, c'est que j'aimerais changer la couleur qui se met a chaque fin de nouvel article (la où il y a marquer commentaires et libellés...).
Sur ton blog ca fait un cadre blanc, sur le mien ( http://dagtestbeta.blogspot.com/) une sorte de vert palichon tout moche....J'ai eu beau chercher sur le html j'ai rien vu (jsuis juste un novice^^)
En esperant avoir la réponse!!!
merci bien et bonne continuation

viti-vino a dit…

Bonsoir Dag

Pour corriger, parametres / modifier html

chercher dans les clauses de style

.post-footer {
background: #ded;
margin:0;
padding-top:2px;
padding-right:14px;
padding-bottom:2px;
padding-left:29px;
border:1px dotted #bbbbbb;
border-width:1px;
font-size:100%;
line-height:1.5em;
color: #666;
}

adapter a vos gouts, par exemple fond jaune mettez

background: yellow;

Bonne fin de soirée

stefanina a dit…

Bonsoir,

juste un petit mot pour vous remercier de tous ces excellents posts que vous publiez afin de rendre le monde blogger plus limpide.
stefanina

Anonyme a dit…

Bonjour et merci pour tout vos tutos !
J'aimerais savoir si c'est possible d'ajouter un menu horizontal en-dessous de la bannière (comme ici par exemple : http://dark-red.canalblog.com).
Merci d'avance !
amelitchcock@ymail.com

viti-vino a dit…

Bonsoir Anonyme

Pour un menu horizontal, voir ici

Forum Blogger

Les Mikalocos a dit…

Bonjour à vous tous,
Je cherche quelqu'un qui pourrait m'aider à changer l'ordre d'insertion de mes photos sur mon blog. En effet la première photo que j'insère est la photo qui se retrouvera a la fin de mon article, et la dernière se retrouvera en début. Or quand je commence mon article, je commence par le début et je souhaiterai insérer ma première photo en début et ainsi dessuite, au fur et à mesure que j'écris mon article. C'est pénible de devoir tout faire glisser, surtout quand il y a beaucoup de photos.
Je vous remercie par avance et espère avoir été assez claire!

Anonyme a dit…

Tout d'abord merci bien pour votre article.

J'aurais aimé savoir si vous aviez une solution pour pouvoir, en plus du forçage de la résolution, forcer le démarrage à un certain temps.
Soit pouvoir lier les paramètres &fmt= ainsi que &#t=

Merci bien.

ABW a dit…

Hello !
Génial ton article mais quel serait le code à ajouter pour la nouvelle version beta de l'iframe ?

La version beta :
http://apiblog.youtube.com/2010/07/new-way-to-embed-youtube-videos.html

viti-vino a dit…

Bonsoir

@ABW

Merci de l info, j ai corrigé l article. C est la seule methode à utiliser si la video figure avant un READ MORE !!

Cdt