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 comments:
Post a Comment