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.
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'/>Ahora cambia donde se indica en color rojo las URLs de los archivos que subiste previamente.
<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>
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&server=vimeo.com&show_title=1&show_byline=1&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&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.
Página del autor | Video Lightbox
No hay comentarios:
Publicar un comentario