Videobox – Lightbox voor video’s

Posted by Cicco

oktober 30, 2007

Videobox geeft hetzelfde effect aan video’s, als Lightbox doet aan foto’s. De meesten kennen de software van Lightbox waarbij de foto op voorgrond komt met een zwarte transparante achtergrond als erop geklikt wordt.

Videobox doet hetzelfde bij video’s en kunnen in deze modus ook afgespeeld worden. Ook video’s die op Youtube, Revver,… staan kunnen op deze manier getoond worden.

Hier kan je een voorbeeld van Videobox zien.

Hoe dit installeren?

Download de software van de website van Videobox. In deze download zitten drie mappen : css, js en swf. Zet deze drie mappen op je server en plaats de volgende regels in de head van je pagina :

<script type="text/javascript" src="js/mootools.js"></script> <script type="text/javascript" src="js/swfobject.js"></script> <script type="text/javascript" src="js/videobox.js"></script> <link rel="stylesheet" href="css/videobox.css" type="text/css" media="screen" />

Vervolgens dien je een klein stukje code aan de link van de video toe te voegen, namelijk :

rel="vidbox"

Een link van een op Youtube geüploade video zou dan zo zijn :

<a href="http://www.youtube.com/v/zcVVwn8rb90&rel=1" rel="vidbox" title="Videobox">Bekijk de video</a>

Je kan ook afmetingen meegeven aan dit effect. Je dient dan enkel de hoogte en de breedte mee te geven aan het kleine stukje code. Een voorbeeld van 400px op 300px is dan zo :