Videobox, un LightBox pour vos vidéos

22/10/2007

Web Développement et Design Allez aux commentaires

Voilà qui va ravir les amoureux de LightBox !

VideoBox est son équivalent pour les vidéos. Ce plugin se base sur Mootools et sur SwfObject ...

Allez voir la démo, histoire de vous faire une idée.

Prêt ?

Installation de Videobox

On télécharge et on inclue la librairie Mootools entre les balises HTML <head> et </head> :
<script type="text/javascript" src="mootools.js"></script>
Ensuite on télécharge le plugin "SwfObject" et on inclue le fichier "swfobject.js" juste en dessous de jQuery :
<script type="text/javascript" src="swfobject.js"></script>
Puis on télécharge le plugin et on inclue le fichier "videobox.js" juste en dessous de "SwfObject" :
<script type="text/javascript" src="videobox.js"></script>
On inclue ensuite le fichier "videobox.css" pour la mise en forme :
<style type="text/css" media="screen">
@import url(videobox.css);
</style>
Et n'oubliez pas d'uploader les 2 images .gif également !

Utilisation de Videobox

C'est très simple, vous allez voir.

Pour inclure une vidéo:

<a href="http://www.youtube.com/watch?v=uhi5x7V3WXE" rel="vidbox" title="Ma video de vacances">Lien pour ouvrir la vidéo</a>

Simple non ? Il suffit de faire un lien vers la vidéo en lui mettant un attribut rel="vidbox".

Plus d'options:

<a href="http://www.domaine.com/votre_video.swf" rel="vidbox 800 600" title="Titre de la video">Cliquez ici pour voir la vidéo</a>

Donc vous voyez que l'on peut préciser la taille avec l'attribut REL. Et l'exemple montre que l'on peut ouvrir n'importe quel .swf via ce système.

Conclusions

Si pour les vidéos de type youtube il suffit de mettre l'url de la page, pour les autres il vous faudra mettre l'attribut SRC se trouvant dans la balise EMBED (donc l'url direct du SWF)

Après libre à vous de mettre un lien sous forme de vignette, histoire de rendre le tout encore plus sympa

-----

Articles relatifs

Commentaires (114) Trackbacks (3) Commenter

david

29/12/2009 à 23:47 | #1

Répondre | Citer

c bon résolu
merci
david

29/12/2009 à 23:52 | #2

Répondre | Citer

une question me tarode
peut on lire des videos via videobox depuis des lien presents dans une anim flash ???
et si quelqu’un connait la réponse ,peut il m’indiquer le chemin??
merci d’avance
Emilie

11/05/2010 à 09:06 | #3

Répondre | Citer

Bonjour,
Merci pour ce tuto qui est vraiment bien fait.
Par contre, j’ai un petit souci, ma videobox marche super bien sur firefox, chrome, safari et opera, mais sur IE …
Le fond ne se grise pas, et la vidéo est placé trop haute.
Le site en question: http://www.cyrusprod.com/productions.html
Il y a des vidéos sur les deux premiers liens.
Ce problème est déjà arrivé à quelqu’un?
Daniel

05/06/2010 à 21:53 | #4

Répondre | Citer

Bonjour,

et merci bcp pour ce tutorial.

J’ai un problème : je dois intégrer dans ma page Html des video hébergés chez Vimeo.
Avec Youtube ça marche bien, et facilement, mais avec Vimeo ça ne marche pas.

Est ce que quelqu’un aurais une solution pour cela?

Merci de votre attention,
D.
Alx

30/07/2010 à 15:29 | #5

Répondre | Citer

Bonjour,

J’essaye d’utiliser cet appel : Videobox.open(« http://vimeo.com/13745295″, »your caption », »vidbox 800 600″);

et j’ai le droit a une belle erreur : Uncaught TypeError: Cannot call method ‘setStyles’ of undefined

Je ne trouve pas d’où viens le problème… Je suis sur Joomla et quand je configure l’ouverture de la vidéo sur un lien ça marche
Alx

30/07/2010 à 15:36 | #6

Répondre | Citer

@Daniel

Regarde Page 2 dans les commentaires tu trouveras le bout de code à rajouter pour faire marcher Vimeo
Julie

19/08/2010 à 18:29 | #7

Répondre | Citer

Bonjour,
je viens d’installer videobox mais j’ai un soucis du au design, en fait la vidéo se retrouve derrière le design comme l’exemple ici :
http://img695.imageshack.us/img695/3825/videoboxk.jpg

Vous n’aurez pas une solution ? merci d’avance
laetitia

15/09/2010 à 10:08 | #8

Répondre | Citer

Bonjour,

J’aimerai personnaliser le player en mettant celui de JW mais cela ne fonctionne pas . Quelqu’un pourrai m’aider car là je ne comprend plus la démarche qu’il faut faire pour mettre un player personnalisé.
MErci par avance.
arno

23/09/2010 à 09:24 | #9

Répondre | Citer

Bonjour, merci pour le tuto.

Mais impossible de le faire fonctionner pour afficher des fichiers swf.
Pourriez vous m’aider sur la balise embed ? et me donner un exemple ?

merci par avance.

arno
zeb

03/10/2010 à 18:59 | #10

Répondre | Citer

@Emilie
il est super ton site emilie !!
j’avais une petite question : Comment as tu fais pour ajouter cette barre de lecture sur tes fichiers SWF ?
j’arrive pas à trouver l’info !
Basquin

03/01/2011 à 06:50 | #11

Répondre | Citer

Aucuns des trucs, bidouilles que j’ai chercher sur le net ne marche.
Mon site fonctionnait avec Alvideo reload, les light box fonctionnaient sur des video en FLV.
mais plus rien ne marche.
J’osse meme pas bidouiller mes fichiers php pour installer ce truc mootol…
Si une personne moyennant finance veut le faire,enfin, je veut dire, trouver une solution pour qe mes vidéos s’affiche en lightBox sur mon site…
qu’elle me contacte avant que je ne passe sur GUPPY !-)

16 heures pleines, deux nuits blanches, achat de plug in et template qui ne résout pas le problème…(escroquerie ???) bastat !

merci
gaz

23/06/2011 à 19:23 | #12

Répondre | Citer

Bonjour a tous j’ai un petit problème moi aussi je suis a la recherche d’un videobox que je pourrais appeler directement au chargement de mon BODY mais impossible de trouver quelqu’un aurais une reponse ?

Merci d’avance
Zenso

24/09/2011 à 14:57 | #13

Répondre | Citer

Salut à tous !

Une petite question : Comment avoir les commandes à partir d’un .swf perso ?
juju

26/10/2011 à 20:46 | #14

Répondre | Citer

J’ai un bug sous IE8 avec ce script…
Impossible d’afficher une vidéo youtube !

Les autres navigateurs marchent pourtant très bien

Quelqu’un a-t-il une solution ?