Vidéobox : Lightbox pour vos vidéos

Vous connaissez déja tous le plugin Lightbox mais connaissez vous Videobox ? Videobox vous permet tout simplement d’afficher vos vidéos avec le magnifique effet Lightbox. Je vous propose de découvrir Videobox ainsi que la procédure d’installation de celui ci dans la suite de cet article.

Pour tester l’effet obtenu clickez simplement sur la vignette ci-dessus.

EDIT : Je rencontre un problème d’accès avec IE et j’ai donc du désactiver Videobox pour le moment mais vous pouvez le voir en action ICI 

Cet effet vous plaît ? Vous n’avez qu’à suivre ces étapes :

1 : téléchargez ‘videobox 1.1‘

2 : Dans ce dossier vous trouverez 3 sous dossiers, uploadez les suivants sur votre FTP :

• sous dossier ‘JS‘ dans le dossier de votre thème
• sous dossier ‘CSS‘ dans le dossier de votre thème

3 : Rendez vous dans votre éditeur de thème et ajoutez les codes suivants juste avant la balise </head> :

<script type= »text/javascript » src= »<?php bloginfo(‘stylesheet_directory’); ?>/js/mootools.js »></script>
<script type= »text/javascript » src= »<?php bloginfo(‘stylesheet_directory’); ?>/js/swfobject.js »></script>
<script type= »text/javascript » src= »<?php bloginfo(‘stylesheet_directory’); ?>/js/videobox.js »></script>
<link rel= »stylesheet » href= »<?php bloginfo(‘stylesheet_directory’); ?>/css/videobox.css » type= »text/css » />

4 : Il ne vous reste plus qu’à inclure la vidéo dans vos articles :

<a href= »http://www.youtube.com/watch?v=uhi5×7V3WXE » rel= »vidbox » title= »Titre de la video »>Cliquez ici pour voir la vidéo</a>

(le code en rouge correspond à l’URL de la vidéo fournie par l’agrégateur de votre choix (ex : Youtube))

Vous pouvez également modifier la taille de la vidéo de la manière suivante :

<a href= »http://www.youtube.com/watch?v=uhi5×7V3WXE » mce_href= »http://www.youtube.com/watch?v=uhi5×7V3WXE » rel= »vidbox 800 600 » title= »Titre de la video »>Cliquez ici pour voir la vidéo</a>

(le code en rouge détermine les dimensions de la vidéo)

Enfin, vous pouvez afficher une vignette à la place du lien textuel :

<a href= »http://www.youtube.com/watch?v=uhi5×7V3WXE » mce_href= »http://www.youtube.com/watch?v=uhi5×7V3WXE » rel= »vidbox 800 600 » title= »Titre de la video »><img src= »l’adresse de votre image » alt= »titre de l’image » /></a>

J’ai pour ma part rencontré un problème d’affichage et la solution m’a été apporté par k-ny que je remercie encore une fois :

• Dans le fichier ‘videobox.css‘ j’ai du supprimer le code ‘body {margin: 0;}‘ car il collait mon blog à gauche de l’écran
• J’ai du supprimer le fichier ‘prototype.js‘ de mon thème qui empêchait l’affichage de la vidéo.

(Source Webinventif)