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

7 thoughts on “Videobox: Lightbox para Videos

  1. Excelente justo nesecitaba una forma de abrir los videos de youtube sin que se salieran de mi web…. GRACIAS POR ESTE CONOCIMIENTO..!

  2. lo que quisiera saber es como poner ese codigo pero para abrir el videobox desde un boton en flash y si hay k modificarle algo al codigo del html … gracias de antemano estoy k revuelo con esa pregunta no eh podido solucionarla

  3. funciona de maravillas pero al tener un flash este queda debajo de el… incluso colocando el wmode=transparent
    alguien sabe algun truco?

  4. Hola, tengo una pagina en donde quiero mostrar tanto los videos y fotos, pero si una trabaja la otra no. Que tengo que hacer para que funciones las dos en la misma pagina. gracias

Leave a Reply

Your email address will not be published. Required fields are marked *

Proudly powered by WordPress | Theme: Wanderz Blog by Crimson Themes.