Inicio Desarrollo Web Videobox: Lightbox para Videos

Videobox: Lightbox para Videos

Seguramente se acuerdan de Lightbox, lo mencionamos en un articulo anterior, es una utilidad en JavaScript que permite mostrar imágenes en una ventanita aparte dentro del navegador.

Ahora bien Videobox, es justamente lo mismo pero en vez de imágenes muestra videos como pueden ser de: YouTube, Google Video, MetaCafe, iFilm ó cualquier archivo flash.

El tamaño del script JS es de 6kb. Usa la librería mootools y swfobject para embelir archivos flash.

Videobox 

Como usarlo

Referenciamos 3 archivos JavaScript necesarios y el archivo de estilos CSS en la parte del <head>.

<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" />

Y aquí lo importante

<a href="http://www.youtube.com/watch?v=uhi5x7V3WXE" rel="vidbox" title="caption">tu video, o si gustas coloca una imagen del video</a>

Adicionalmente puede cambiar el tamaño del video dentro del atributo rel:

<a href="http://www.youtube.com/watch?v=VhtIydTmOVU" rel="vidbox 800 600" title="caption">our video1</a>

Enlaces | Videobox

Programador y Desarrollador Web. Administrador de RibosoMatic y Proyecto Yupy. Blogger y entusiasta de la tecnología, internet, software y tutoriales para desarrollo de aplicaciones para la web ....