You are on page 1of 3

IR AL ARCHIVO videolightbox.

js

Buscar VideoLightBox y borrar VideoLightBox.com y http://videolightbox.com

Video Lightbox: Mostrar videos en ventanas modales


15 de enero de 2011 Publicado por El Potro , Etiquetas: Trucos 129 comentarios,

Usualmente no soy muy afecto a las ventanas modales que son específicas para sólo un tipo
de multimedia, y aunque Video Lightbox es de este tipo (ya que sólo muestra videos en
ventanas modales) me ha gustado por la variedad de estilos que tiene para su presentación
de videos. Al momento cuenta con seis estilos de ventanas para mostrar los
videos, standard, estilo de nube, oscuro, "Facebook", Mac y Windows Vista.

¿Las vemos? Ver demo de Video Lightbox

Otra de las ventajas que tiene es que podemos incluir videos de distintos servicios:
YouTube, Vimeo, Metacafe, GoogleVideos y MySpace.

Originalmente Video Lightbox se maneja desde un programa que está disponible para
descargar en la página del autor y su usabilidad es bastante sencilla sin embargo está
enfocado a sitios web que usan transferencia de archivos FTP y si queremos publicarlo en
Blogger simplemente no podremos. Pero esto no es problema ya que podemos instalar
manualmente en la plantilla los códigos necesarios para que funcione casi sin problemas.

NOTA: En las plantillas hechas a través del Diseñador de plantillas de Blogger no


funciona.

Lo primero que tenemos que hacer es descargar este archivo, descomprimirlo y subir a la
red los archivos.

Luego entra en Diseño | Edición de HTML y después de <head> pega lo siguiente:


<link href='URL del archivo .css' rel='stylesheet' type='text/css'/>
<script src='URL del archivo jquery.tools.min.js' type='text/javascript'/>
<script src='URL del archivo swfobject.js' type='text/javascript'/>
<script src='URL del archivo videolightbox.js' type='text/javascript'/>

<style type='text/css'>
#videogallery { zoom:1; }
#videogallery span{ display:block; }
#videogallery a{
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
position:relative;
vertical-align:top;
margin:5px;
text-align:center;
opacity:0.87;
}
#videogallery a img{
display:block;
border:none;
margin:0;
}
#videogallery a:hover{
text-decoration:underline;
opacity:1;
}
#videogallery a#videolb{display:none}
</style>
Ahora cambia donde se indica en color rojo las URLs de los archivos que subiste
previamente.
En el caso del primero donde dice URL del archivo .css deberás pegar la URL del archivo
.css del estilo que hayas elegido, ya sea el estilo Mac, Windows Vista, etc. Sólo puedes
elegir uno de ellos.

Ahora cuando cuando vayas a usarlo en tus entradas pega uno de estos códigos
dependiendo de qué página tomes el video:

YouTube
<div id="videogallery">
<a rel="#voverlay" href="http://www.youtube.com/v/hSTUu6XqegI?autoplay=1"
title="Video Lightbox con YouTube">YouTube</a>
</div>

Vimeo
<div id="videogallery">
<a rel="#voverlay"
href="http://vimeo.com/moogaloop.swf?clip_id=4949853&amp;server=vimeo.com&amp;s
how_title=1&amp;show_byline=1&amp;autoplay=1" title="Video Lightbox con
Vimeo">Vimeo</a>
</div>
Google Videos
<div id="videogallery">
<a rel="#voverlay" href="http://video.google.com/googleplayer.swf?docid=-
1511995185163028652&amp;autoplay=1" title="Video Lightbox con
GoogleVideos">Google Videos</a>
</div>

MySpace
<div id="videogallery">
<a rel="#voverlay"
href="http://mediaservices.myspace.com/services/media/embed.aspx/m=101131953,t=1,mt
=video,ap=1" title="Video Lightbox con MySpace">MySpace</a>
</div>

Metacafe
<div id="videogallery">
<a rel="#voverlay"
href="http://www.metacafe.com/fplayer/2652262/the_freedom_aliance.swf?autoPlay=yes"
title="Video Lightbox con MetaCafe">Metacafe</a>
</div>

En cualquiera de ellos hay que cambiar lo que está en color azul por la ID del video, a
excepción de Metacafe donde hay que poner la mitad de la URL del video.
Si quisieras que en lugar del texto apareciera una imagen en miniatura entonces cambia el
texto por el código de una imagen:

<img src="URL de la imagen" style="width:150px; height:100px; border:0;" />

La instalación y su uso es muy parecida a Shadowbox con la excepción de que Video


Lightbox está diseñada para videos y de que tiene muchos estilos para mostrar sus ventanas
modales.

Aunque funciona muy bien, una de las desventajas que puede tener es que al hacerlo
manualmente (sin el programa) todos los videos deberán tener la misma medida pues la
plantilla del video no es auto-ajustable.

Video Lightbox tiene dos ediciones, una gratuita (que es la que hemos descargado) en la
cual aparece un enlace en la parte superior, y una comercial (de pago) con la cual ese enlace
desaparece, aunque con un poco de maña también puede quitarse.

http://www.ciudadblogger.com/2011/01/video-lightbox-mostrar-videos-en.html

You might also like