Voici la petite icône que j’ai tant cherché à acquérir pour ce blog. Qu’est-ce que c’est? La certification W3C, preuve que ce site a été développé dans le souci du détail… ^^ En fait, le W3C (WorldWide Web Consortium) est une organisation qui recommande les standards de développement Web. Ces mêmes standards, en théorie, permettent de voir s’afficher un site Internet de la même façon quelque soit le navigateur Internet utilisé.
Des standards qui sont parfois difficiles à respecter… surtout quand on se sert d’applications tierces comme Youtube! En effet, le code que Google donne pour afficher leurs vidéos sur votre site n’est pas conforme W3C, ce qui peut être fâcheux dans le cas où votre serviteur va s’acharner à coder proprement.
Aussi une petite recherche s’impose, et c’est l’heure du cours. En effet, comment rendre une vidéo Youtube compatible W3C? Je me sens de bonne humeur aujourd’hui, alors c’est parti, mon kiki!
Le code que vous donne Youtube quand vous voulez afficher une vidéo sur votre site ressemble à ceci :
<object width=’320′ height=’265′><param name=’movie’ value=’http://www.youtube.com/v/f184GruHq9o&hl=fr&fs=1&’>
</param><param name=’allowFullScreen’ value=’true’></param><param name=’allowscriptaccess’ value=’always’></param><embed src=’http://www.youtube.com/v/f184GruHq9o&hl=fr&fs=1&’ type=’application/x-shockwave-flash’ allowscriptaccess=’always’ allowfullscreen=’true’ width=’320′ height=’265′></embed></object>
Pas très ragoûtant, hein? Et en plus, c’est même pas compatible W3C… Quel dommage! Mais on va changer ça… Prenez votre éditeur de texte préféré (ou le mien, ça peut servir), et copiez-y le code ci-dessus. Ce dernier va juste nous servir à garder des données importantes. Vous allez maintenant coller à la suite le code ci-dessous :
<object type=’application/x-shockwave-flash’ width=’LARGEUR’ height=’HAUTEUR’ data=’URL_YOUTUBE’>
<param name=’movie’ value=’URL_YOUTUBE’ />
<param name=’wmode’ value=’transparent’ /><param name=’allowFullScreen’ value=’true’ />
<param name=’allowScriptAccess’ value=’always’ />
</object>
Maintenant, vous allez associer les paramètres correspondants : LARGEUR va devenir 320, HAUTEUR va être 265, et URL_YOUTUBE va être l’adresse de la vidéo (http://www.youtube.com/v/f184GruHq9o&hl=fr&fs=1&).
Dernière manipulation sur l’URL : vous allez remplacer les & de l’adresse de la vidéo par & …
Si vous avez bien fait votre job, vous devriez avoir ceci :
<object type=’application/x-shockwave-flash’ width=’320‘ height=’265‘ data=’http://www.youtube.com/v/f184GruHq9o&hl=fr&fs=1&‘>
<param name=’movie’ value=’http://www.youtube.com/v/f184GruHq9o&hl=fr&fs=1&‘ />
<param name=’wmode’ value=’transparent’ /><param name=’allowFullScreen’ value=’true’ />
<param name=’allowScriptAccess’ value=’always’ />
</object>
Reste plus qu’à mettre ce bout de code dans vos pages… Voilà, votre vidéo Youtube est valide W3C! Merci qui?
Attention cependant, je ne garantis rien concernant Dailymotion ou d’autres systèmes de streaming! Si ce tutoriel n’est pas clair, merci de laisser un commentaire : je tâcherai de faire des captures d’écran de mise en pratique de ce système.
