Personnalisez l’affichage de vos vidéos

Petit tuto pour personnaliser dynamiquement vos incrustations de videos youtube sur votre site en utilisant des fonctions jQuery et une image de fond…

 

 

Nous allons utiliser cette image créée (avec amour) par mes soins comme encadrement de la vidéo :

TV-ctd

Voici le code jQuery à insérer dans votre page, il redimentionne l’iframe aux dimensions de l’intérieur de l’image écran (486×267) :

Voici le code CSS du cadre TVbox :

Voici le code iframe de l’insertion de la video:

Quelques options sur le player Youtube :

  • autoplay=1 : Lance automatiquement la vidéo
  • loop=1 : Fait trouner en boucle la vidéo
  • showinfo=0 : désactive l’affichage d’informations
  • controls=0 : désactive la barre de controle

Et la DEMO

Ce script est simple et perfectible car s’il y a d’autres iframes que des vidéos youtube dans la page cela risque de poser problème 😉
Mais si ça peut aider, c’est avec grand plaisir que je partage 😉

Sinon il y a aussi...