Videobox, un LightBox pour vos vidéos

22/10/2007

WebDev 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

kUz

@kUz

Bon j’ai trouvé : il faut dire à swfObject écrite par videobox.js de lancer l’autostart. Dans videobox.js, aller à la ligne 126 (si vous partez d’une vidéo en flv) et compléter par :

+ »&autostart=true » après +sLinkHref

ce qui donne :

this.so = new SWFObject(this.options.flvplayer+ »?file= »+sLinkHref+ »&autostart=true », « flvvideo », this.options.contentsWidth, this.options.contentsHeight, « 0 », « #000 »);
kUz

@kUz
PS : dans l’expression, c’est des doubles quotes partout, pas des guillemets français !
david

bonjour a tous,
voila je pense avoir suivi correctement le tuto ,et pourtant ca ne marche pas ,je suis sur dreamweaver cs4, et je suis assé débutant en fait ,estce que quelqun pourrait m’expliquer pourkoi dreamwever marque que :mootools.js est introuvable ,et idem pour les autres .js ??
j’ais telecharger ces fichiers et les ais placer ds mon dossier dream waever…alors ou dois je les placer???
merci
david

c bon résolu
merci
david

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

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

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

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

@Daniel

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

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

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

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

@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

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

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

Salut à tous !

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

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 ?
Chris

Bonjour,

Alors voilà je patoge à mort!!!!!
Je suis novice dans ce genre de manipulation mais j’aime comprendre comment ça marche. Bref! que je vous explique.
Je me lance dans un site de Webtv ce qui veux dire que je vais pas mal cumuler de vidéo et que videobox est important pour moi.
Je bosse sur wifeo. Et je j’arrive pas à comprendre comment je dois faire. je précise que je bosse sur un mac.

Donc J’ai un dossier que j’ai téléchargé (Vidéobox 1.1) qui s’appelle vidéo j’ai trois dossier css, js swf. malgré quelques essais non concluant je suis dans le regret de pas savoir quoi faire de ces fichiers. -_-!!!

J’ai besoin d’aide!!!

Merci.
flatlink

Bonjour 🙂

Tout d’abord excellent tuto 🙂 Ma problématique est que j’aimerais simplement qu’au lieu de l’action par clic, la video se lance automatiquement.

Est ce possible ?

Merci 🙂
martinet

Bonjour et merci pour votre travail.
J’ai bien réussi à installer tout cela et cela fonctionne très bien avec une url youtube. Moi j’iamerais intégrer une vidéo depuis mon dossier local ou de ce site (http://webtv.ac-versailles.fr/restauration/Saltear-champinones-escalopados) J’i eu beau tout essayer pour la vidéo en question ou depuis mon dossier local et rien à faire.

Merci