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

Frank DENIS

Sympa !

Juste un petit bémol, il ne semble pas possible de passer d’une vidéo à l’autre à l’aide des flèches comme avec Lightbox.

Et dommage qu’il utilise Mootools au lieu de Prototype.
k-ny

Oui il manque encore 2-3 choses pour le rendre vraiment parfait. Mais on peut à mon avis espérer des possibles mises à jour 🙂
stagueve

Bonjour,

J’ai suivi toutes les étapes mais ou installer les divers fichiers ?
Dans le doute j’ai uploadé le dossier ‘video’ téléchargeable sur le site de référence et ai rectifé les URL dans les scripts que j’ai ajoutés l’un en dessous juste avant .

A savoir que j’ai installé le flvplayer à ma racine mais que le dewplayer y est déja également (cela peut il poser un problème ?)

Pour le style CSS le code que vous fournissez n’est pas identique à celui fourni sur le site de référence mais l’un et l’autre ne fonctionnent pas chez moi ?

Bref si vous pouviez m’apporter des précisions quant à l’installation (ou uploader les fichiers et quel code CSS utiliser exactement).

Merci d’avance.
k-ny
Hello Stagueve !

Je vais prendre le cas d’un blog wordpress et les fichiers du plugin tel quel donc …

Dans le dossier de ton thème, tu upload le dossier « css » et « js ». Le dossier « swf » est optionnel, c’est seulement si tu as des flv seul !

ensuite, dans le fichier « header » de ton thème, tu rajoutes ceci:
```
<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" />
```
Et voilà, ça devrait rouler sans soucis ! Si malgré tout ça ne marche pas, file moi un lien d’une page de test, il y a peut-être un conflit avec un autre fichier .js

😉
stagueve

Merci pour ta réponse (rapide !).

Ca ne fonctionne toujours pas cela dit :/

1 : Vidéobox s’ouvre mais aucune vidéo n’apparaît

2 : le fichier videobox.css fout la pagaille (mon blog se colle à gauche de l’écran) dès que je l’intègre au ossier de mon thème ?!

je me demande s’il n’y a pas un conflit avec ce code présent dans mon header :

<!– @import url( ); –>

3 : désolé mais testant videobox sur mon blog je ne peut pas laisser ce bug (mes visiteurs me couperaient la tête ^^)
k-ny

Qu’on lui coupe la tête ! 😀

Bon pour ton soucis de mise en page, je vois d’où ça vient ! Essais donc de virer le

body {margin: 0;}

du fichier videobox.css.

Pour la vidéo qui n’apparait pas, je me demande si ce n’est pas un conflit entre swfobject.js et ton prototype.js

Si tu peux, fait un test rapide en virant ton prototype.js 😉
stagueve

T’es une bête !!!!
En virant le prototype.js ça a réglé le problème 🙂

Juste une dernière question : le fait de l’avoir viré ne risque pas de causer des problèmes ailleurs ?…
k-ny

Merci ^^

C’est une bonne question ! Il faut déjà savoir si le prototype.js est fourni avec ton thème, ou avec un des plugins (je penche pour le thème, je suppose que tu as édité le fichier header manuellement).

Donc il se peux que quelques fonctions type ajax ou javascript ne fonctionne plus. Mais ne connaissant pas le fonctionnent exact de ton thème …

Fait le tour de ton blog et clic un peu partout pour voir !
stagueve

Ok ben merci encore ! Tu as bien mérité un petit backlink 😉

@bientôt !
k-ny

Héhé, je n’en demandais pas tant, un simple merci me suffit en général 😉

Bon maintenant si quelqu’un veut me faire un don … ok je sors 😀

++
Pingback: videobox : effet lightbox pour vos vidéos | Nowhere Else 2.0()
stagueve

Bon ben c’est encore moi… désolé de polluer ton blog mais finalement sans le ‘prototype.js’ le blog n’est plus accessible via IE et certains plugin ne fonctionnent pas normalement (la fenêtre ‘sharethis’ par exemple ne s’ouvre plus mais renvoi sur une autre page).

Donc si pouvais me sortir une dernière astuce pour faire cohabiter les ‘js’ je suis preneur 😉

PS: j’ai réinstallé ‘prototype.js’ en attendant de trouver une solution car sans les lecteurs sous IE ça fait un sacré vide à combler pour mes stats…
JFG

Bonsoir,

Quelqu’un sait-il si VideoBox fonctionne aussi avec des vidéos au format .flv ?
Si non, quelqu’un connait il comment faire pour « intégrer » un lecteur FLV dans un « pop-up » style Lightbox ?

Merci d’avance !
k-ny

@ stagueve
Faudrait determnier d’abord d’où vient le bug. Il se passe quoi exactement ? L’effet lightbox marche mais les vidéo n’apparaissent pas ?

@JFG
L’auteur du plugin a prévu ce cas de figure, dans le ZIP il fournit un lecteur flv (dans le dossier swf). Et pour le fonctionnement du lecteur : http://www.jeroenwijering.com/extras/wizard.html
stagueve

Oui c’est ça, le ‘popup’ videobox commence à s’ouvrir (popup+fond qui s’assombrit) mais se fige ensuite et ce sans que le .gif (close) ni la vidéo n’apparaissent.
k-ny

@Stagueve
Bon j’ai fait 2-3 recherches, les avis sont mitigé sur la compatibilité de prototype et des autre librairie. Ce que tu peux tester, c’est télécharger la toute dernière version de swfobject, ils ont peut-être améliorer la compatibilité …

http://swfobject.googlecode.com/files/swfobject_2_0_beta5.zip

@JFG
En fait tu peux linker directement le .flv apparemment c’est prevu 😉
JFG

@k-ny
Merci beaucoup : je confirme après essai qu’en suivant la procédure que tu détailles, et en linkant directement un fichier .flv, le lecteur s’ouvre dans la popup Videobox !
Depuis le temps que je cherchais comment faire…
k-ny

Content que ça fonctionne 😉
Pingback: Internet (Web2.0) et ophtalmologie » VideoBox : diffuser des film .FLV avec effet Lightbox()
stegueve

la dernière version de swfobject n’a malheureusement rien changé 🙁
Bon c’est pas très grave, je me passerais de Videobox avec regret tout de même…

Merci pour ton aide en tout cas 😉
k-ny

Zut de zut ! J’ai pas l’impression d’avoir mérité mes backlinks du coup ^^

De toute manière je vais abordé le plugin « Thickbox » qui permettra de faire des effets similaires. Avec un peu de bol ça passera cette fois 😉
sebjan

Bonjour,

Quelles sont toutes les options de ce plugin ?

en locurence « mettre un lien sous forme de vignette »

A+
Boris

@stagueve : Solution => Utiliser un seul framework
k-ny

@Boris

ça c’est certain ! Quand on peut, autant se focaliser sur un seul framework 🙂
stagueve

Euh tu te moques pas hein… un seul framework ? Traduction ? ^^
k-ny

Non non j’me moque pas 😀

Videobox est basé sur Mootools, et mootools est un framework. Tout comme prototype, qui est utilisé dans ton skin. Moi sur ce blog j’utilise jquery. Et il y en a des dizaines d’autres.

Un framework permet de développer plus rapidement et de rendre compatible les effets dans tous les navigateurs. Mais seulement voilà, il est très fréquent que les frameworks utilisent des fonctions similaire à la base, du coup ça crée des conflits. Certains framework on des manœuvres d’évitement ((comme jquery) pour forcer la compatibilité, mais au final il vaut mieux s’en tenir à un seul pour éviter les surprise (et puis ça alourdi les pages).

:p
Fskng

Bonjour , serai-t-il possible de le mettre sur un blog , du genre (Over Blog) ^^ ?! Si oui , quelles modifications s’averent necessaires ?
k-ny

Hello Fskng,

ben ça dépend, As-tu accès au code html de ton blog (ou du template) ?
Fskng

J’ai accés a ma fiche de style Css , et aux parties equivalent au balises
stagueve

Merci pour ces précisions 😉
k-ny

De rien stagueve 😉

@ Fskng

« aux parties équivalent au balises »
Euh, en fait ma question c’est, peux-tu écrire quelque chose dans le code html de ton blog. En fait le javascript doit être insérer de préférence dans les balises « head » de la page. Mais il est aussi tout à fait possible de l’insérer directement dans la page (genre si tu peux modifier des zone dans ta barre latérale) …
Ghazal

bonjour,
je me permettrais de mettre un petit bémol sur ce plugin, que je trouve un peu mal foutu alors qu’il en existe un autre, équivalent -mootools based- que j’estime plus abouti et facile à mettre en place:
Mediabox
http://iaian7.com/webcode/Mediabox
Essayez-le !
Fskng

a excuse , aprament sa a coupé ^^’ , equivalent aux balises
Fskng

apparament il veut pas que je mette de balises ^^’ , bref c les balises -Body- …
k-ny

@Ghazal
Effectivement ça à l’air bien puissant, j’vais y jeter un oeil 🙂

@Fskng
Donc si tu peux caser un truc dans tes balises, il te suffit d’héberger les fichiers du .zip de l’exemple et de mettre le code d’intégration. Si tu peux tu met donc le code dans ton < head >, si pas essais de la coller juste après ta balise < body >
Pingback: Jiminix Wordpress’ BLog » Deux nouveaux pitits plugin’s bien sympathique somme toute…()
Hiphopee

Bonsoir, j’ai essayer de mettre un lien vers une vidéo Dailymotion mais c’est très bizarre elle ne s’affiche pas ! Si quelqu’un sait comme faire marché les vidéo de dailymotion sa serait cool ^^ merci!
DJ Rom

Salut !!!

Bon, ça marche c’est cool… mais j’ai un ptit problème !!! Et oui !!! lol

En fait, j’ai des fichiers swf avec des chargements de fichiers externes (jpg, txt). Mais ils ne s’affichent pas.

Ces fichiers se trouvent dans des dossiers… pas de liens internet… du coup videobox ne trouve pas le dossier !!!

Je ne possède plus tout les fla !

Comment je peux faire ? Un endroit ou je peux mettre ces fichiers ?

Merci davance… et bonne continuation !

Big UP
DJ Rom

Bon et bien, je vais me répondre et apporter la solution…

En cherchant un peu +, j’ai trouvé ou placer !!!

Faut le mettre à la base du site…

Et ça marche…
DJ Rom

Ha un autre truc… Je remarque qu’avec les fichiers swf, lors du chargement du fichier, le « loading » n’apparait pas… Quand y’a un temps de chargement un peu long, ça peut être dommageable…

La même chose chez vous ?
Guillaume

Pour les vidéos Dailymotion, j’ai trouvé la solution (après bien des essais…) 😉

En fait, sur le site Dailymotion, tu copie le code « lecteur exportable de la video » puis tu extrait le lien du type : « http://www.dailymotion.com/swf/2EhM72AyIZEcqpXxw » que tu met sur ton site/blog.

Fais l’essai avec ce lien, tu va voir, ça marche.

Voilou, bisous
RAZA

Bonjour,

Je voudrais créer un site de vidéo, style youtube ou dailymotion.
J’ai actuellement un site de photo.
Comment pourrais-je faire pour faire la même chôse que les photos.
(video à la place des photos)
http://ermoviz.free.fr/cannet/

Merci
Hiphopee

Merci Guillaume !

J’ai un autre problème également… Enfaite sur mon site j’ai donc ma page ou il y’a mes vidéos donc l’effet marche sans problème, et dans mon footer j’ai en lien textes 5 de mes dernières vidéos ajoutées (lorsque l’on clique dessus la vidéo est censée s’ouvrir avec l’effet VIDEOBOX) sa marche impeccable dans la rubrique des vidéos mais dans les autres sa ne fonctionne pas ! Sa me place juste le lecteur vidéo flash bizarrement tout en bas… Mon footer est un include et j’ai bien appliquer les Js à toutes mes pages qui sont toutes à la racine.

Voila je sais pas si je me suis bien fait comprendre lol mais si quelqu’un capte et qu’il a une solution je suis preneur !
Sylvain

hey hey tout le monde;
si vous aviez une idée simple pour éviter d’afficher la bar du bas dans le vidéobox ce serait sympa.

j’aimerais pouvoir préserver uniquement la flèche sur image au centre du vidéobox mais sans la bar du bas. Tout ce qu’il suffit pour mettre en action le vidéo c’est un clique de l’utilisateur, autant pour le mettre en marche que pour sa remise en marche, donc pas besoin des fonctions « outils » pour voir le vidéo.
sylvain

merci de faire preuve de discrimination en supprimant mon thread. Really professional!!?
sylvain

oh mille pardon, il est réapparue en publiant ce dernier… désolé

je travaille en ce moment à même le fla pour finallement mettre en alpha tout les boutons du controlbar… des nouvelles sous peu pour ceux et celles qui s’y intéressent
simon

moi, ca ne fonctionne pas, quand je clique sur ma vidéo, je n’ai que le lecteur flash qui s’ouvre, le reste est caché derrière mon image de fond
Pinouf

Bonjour,
je voudrai utiliser une vidéo flv qui est sur mon serveur mais je n’arrive pas a le faire marcher

j’ai mis la ligne

Cliquez ici pour voir la vidéo
Pinouf

href= »lien.flv » rel= »vidbox 800 600″ title= »Titre de la video »>Cliquez ici pour voir la vidéo

Désoler pour le triple post…
k-ny

Hello pinouf,

Essai en mettant l’url complete du flv (http://tonserveur.com/video.flv)