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

  1. 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>
  2. 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>
  3. 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>
  4. On inclue ensuite le fichier "videobox.css" pour la mise en forme :
    <style type="text/css" media="screen">
            @import url(videobox.css);
    </style>
  5. 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

  1. david
    29/12/2009 à 23:47 | #1
    Répondre | Citer

    c bon résolu
    merci

  2. 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

Page des commentaires
  1. 23/10/2007 à 16:22 | #1
    videobox : effet lightbox pour vos vidéos | Nowhere Else 2.0
  2. 25/10/2007 à 03:19 | #2
    Internet (Web2.0) et ophtalmologie » VideoBox : diffuser des film .FLV avec effet Lightbox
  3. 22/11/2007 à 01:38 | #3
    Jiminix Wordpress’ BLog » Deux nouveaux pitits plugin’s bien sympathique somme toute…