Videobox, un LightBox pour vos vidéos
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:
Simple non ? Il suffit de faire un lien vers la vidéo en lui mettant un attribut rel="vidbox".
Plus d'options:
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
iTypo: thème Wordpress gratuit
Guide pour mieux gérer vos emails via gmail (multicompte, redirection, ...)
Comment réussir vos concours sur vos blogs ?
Brève Wordpress: 40 liens, thèmes, plugins et astuces en tout genre !
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.
Oui il manque encore 2-3 choses pour le rendre vraiment parfait. Mais on peut à mon avis espérer des possibles mises à jour
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.
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
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 ^^)
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
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 ?…
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 !
Ok ben merci encore ! Tu as bien mérité un petit backlink
@bientôt !
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
++
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…
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 !
@ 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
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.
@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
@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…
Content que ça fonctionne
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
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
Bonjour,
Quelles sont toutes les options de ce plugin ?
en locurence « mettre un lien sous forme de vignette »
A+
@stagueve : Solution => Utiliser un seul framework
@Boris
ça c’est certain ! Quand on peut, autant se focaliser sur un seul framework
Euh tu te moques pas hein… un seul framework ? Traduction ? ^^
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
Bonjour , serai-t-il possible de le mettre sur un blog , du genre (Over Blog) ^^ ?! Si oui , quelles modifications s’averent necessaires ?
Hello Fskng,
ben ça dépend, As-tu accès au code html de ton blog (ou du template) ?
J’ai accés a ma fiche de style Css , et aux parties equivalent au balises
Merci pour ces précisions
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) …
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 !
a excuse , aprament sa a coupé ^^’ , equivalent aux balises
apparament il veut pas que je mette de balises ^^’ , bref c les balises -Body- …
@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 >
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!
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
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…
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 ?
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
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
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 !
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.
merci de faire preuve de discrimination en supprimant mon thread. Really professional!!?
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
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
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
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…
Hello pinouf,
Essai en mettant l’url complete du flv (http://tonserveur.com/video.flv)
Cette erreur apparait lors du chargement de videobox.js :
this.anchors has no properties
http://localhost/js/videobox.js
Line 23
Pourquoi ce la ne veut pas marcher ?
Merci de vos réponses
Salut,
Il y a une autre galerie ici genre I-Tunes avec notre nouvelle technique de diffusion vidéo.
(avec Firefox uniquement pour la gallerie)
http://www.streamfr.net/demos.php
Merci de votre visite
Euh… question bête concernant Videobox :
comment fait-on pour faire une détection du plugin Flash, puisqu’ici ce n’est pas un swf que l’on charge dans la page html ?…