Comment insérer des vidéos Youtube HTML5 sur votre site ?

par Korben -

Lorsqu’on insère une vidéo Youtube dans une page web, on se retrouve avec un super player flash et notre vidéo en FLV qui se joue dedans. Impecc… Pour faire ça, il suffit simplement de copier coller le code qui se trouve sous la vidéo youtube.

Ce qui donne un truc comme ça :

https://www.youtube.com/watch?v=6_I70KACh4o

Bon, ça on le savait tous. Rien de nouveau sous le soleil…

Mais comment faire pour insérer une vidéo Youtube qui soit affichée en HTML5 (avec la balise vidéo) ou en flash selon le navigateur de vos visiteurs ? Et bien pour le moment, il n’existe pas de solution propre proposée par Youtube mais on peut feinter le système avec une petite iframe (oui, j’aime pas les iframes mais parfois c’est pour la bonne cause).

Si je prend par exemple l’url de la dernière bande annonce de TRON, voici ce que j’obtiens :

http://www.youtube.com/watch?v=6_I70KACh4o

J’adapte un peu l’url pour avoir ceci :

http://www.youtube.com/embed/6_I70KACh4o

C’est à dire pour avoir le player directement, qui sera soit du HTML5 si votre navigateur le supporte, soit du flash si votre browser est à la masse ;-)

Ensuite, un petit coup de iFrame magique comme ceci :

https://www.youtube.com/watch?v=VIDEO_ID

EDIT : Sur les conseils de Diti, j’ai testé avec une balise object et ça à l’air de le faire un peu plus dans les normes.

https://www.youtube.com/watch?v=VIDEO_ID

En prenant bien soin de remplacer VIDEO_ID par le code de la vidéo et de mettre la bonne taille. Dans le cas du trailer de TRON, ça donnerai donc ça pour une iframe :

https://www.youtube.com/watch?v=6_I70KACh4o

et ça pour un object :

https://www.youtube.com/watch?v=6_I70KACh4o

Et voilà, le tour est joué !

[Source et photo]