Video Lightbox: Mostrar videos en ventanas modales

15 de enero de 2011 131 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.


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;show_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.

Página del autor | Video Lightbox


131 comentarios en:

" Video Lightbox: Mostrar videos en ventanas modales "

  1. Esta de lujo esta wea potro ;) deverdad denuevo miles de gracias :D !

    ResponderEliminar
  2. hoye potro sabes la web esa la de http://www.3djuegos.com/ las entradas que ace como puedo acer yo eso una imagen y el titulo de la noticia dimelo porfavor donde dice Novedades, toda la actualidad

    ResponderEliminar
  3. Justamente eso andaba pensando en hacer, peor también hay una función para las imágenes, desconozco si es con Lightbox, pero cuando le das click, le da un aspecto parecido a el video.

    ResponderEliminar
  4. MCarlitooH2, lUiiS'APOdACA!!, -º_Rzm_º-, qué bueno que les ha gustado!

    henry Jason, yo también :P

    Pokelevel, ya te he respondido en la otra entrada.

    Beto Wan Kenobi, hay varios que sí soportan distintos tipos de archivos, Lightbox sólo es para imágenes pero con Shadowbox sí puedes meter tanto imágenes como videos.

    ResponderEliminar
  5. Hola potro quisiera saber como hiciste tu logo de ciudad blogger digo los edificios y todo eso xq tengo photoshop pero no creo con este programa se pueda hacer un logo y coreldraw de verdad no se usarlo si me podrias informar de un programa facil de usar para hacer un logo

    ResponderEliminar
  6. Lo hice con Photoshop trabajando con vectores, supongo que con Corel Draw los resultados son mejores pero tampoco sé usarlo. Con Photoshop podrás hacerte de un logo, sólo es cuestión de que tengas algo en mente y busques algunos tutoriales de ello en la red.

    ResponderEliminar
  7. Exelentee me parecene demaciado buenos tus aportes a los programadores novatos como yo.
    espero k sigas en este camino de aportes a la comunidad espero una visita en mi blog por sugerencias para que tambien pueda salir adelante y obtener frutos que es mi meta

    ResponderEliminar
  8. Está bien como alternativa pero me gusta más shadowbox, y eso que me ha costado mi tarbajo ponerlo en el blogs, probé todos los contenidos y se me atrancó con los juegos y vídeos. ¿Por qué blogger pone patas arriba el código que introducimos? A mí me desaparece hasta el width, es cómo si no me dejara escoger las medidas de la ventana modal. Gracias Potro.

    ResponderEliminar
  9. Que tal Potro, como estas? Soy nuevo ESCRIBIENDO... pero sigo cada paso tuyo,y me va MAS QUE BIEN en mi BLOGSPOT de Peliculas (lo dejo por si las dudas quieras descargar alguna :), por ahora va dedicada al terror... pero ya pondre mas generos http://FastenMovies.Blogspot.Com).

    Ahora, mi pregunta y problema es el siguiente:

    Ya hice el feedburner para que se registren los usuarios, gente que entra al blog para poder recibir notificaciones sobre mis posts, y articulos (Peliculas, Series, Documentales, etc.)

    Me registre con un Correo electronico mio, el cual queria probar si de verdad llegaban las notificaciones, puse mi Correo electronico en el recuadro de Subcripcion donde se encuentra en mi BLOG, y salio un recuadro donde debo poner unas palabras claves, ya lo hize. Luego fui a verificar el mensaje en mi correo Hotmail, hice click en el ENLACE que nos da para poder Activar la llegada de los mensajes de Notificaciones de mi Blog.

    Hice un POST NUEVO, para ver si realmente llega el mensaje,pero no llega. Nose que es lo que pasa, cual es el problema. Creo que vos me podrias ayudar :).

    Se que no tiene nada que ver lo que estoy escibiendo con respecto al tema "Video LightBox: Mostrar Videos en Ventanas Modales" pero es que nesecitaba que veas este mensaje lo mas pronto posible,y bueno ... era el ultimo Post que hacias, asi que lo hacia mas llamativo.

    Espero tu respuesta atentamente , en este mismo POST. Saludos, y GRACIAS!

    ResponderEliminar
  10. Potro segui todos los pasos al pie de la letra pero no me funciono, No se si hay problema que ya tenga shadowbox y cree conflicto es os cuestion de qu eno pude ubicarlo :P Aunque ya coloque todos los archivos y ubicados despues de head Con el respectivo codigo :)

    ResponderEliminar
  11. Muy buena posibilidad para no llenar de videos las entradas.
    Potro te escribo en la entrada "Menú horizontal con efecto deslizante"
    Saludos que andes bien.

    ResponderEliminar
  12. Amigo Potro, me podrías ayudar?... quiero poner los enlaces de los directorio tal y como tu los tienes en tu Blog, hasta el final y en línea. Lo he intentado pero no los puedo alinear, aparecen dos arriba y tres abajo, o sea en dos líneas y solamente puedo poner 5 de ellos.
    Olos podre poner todos juntos en un Gadget?
    Me podrías explicar como lo debo hacer?

    Gracias.

    ResponderEliminar
  13. Nadie, probablemente sea por la plantilla, lamentablemente aunque hay cientos de plantillas para Blogger no todas son muy amigables para hacer ese tipo de personalizaciones.

    ResponderEliminar
  14. FasteN, algunas veces tarda un poco en llegar las actualizaciones del blog al correo pero puedes agilizarlo siguiendo estas recomendaciones.

    ResponderEliminar
  15. beat-superliga, ¿en cuál blog lo has puesto?

    Agresio Girón C., sólo pega los códigos de las imágenes uno detrás del otro sin dar saltos de línea, de esa forma se deberán alinear horizontalmente.

    ResponderEliminar
  16. hola potro oye esto efecto lo puedo usar en una web que estoy haciendo en html y css por que lo intento y no me sale nada que estare haciendo mal.

    ResponderEliminar
  17. Hola manuel,

    Si lo quieres para una web entonces te recomiendo que visites la página del autor para descargar el programa, ahí podrás crear la página html de forma automática y podrás subirlo desde FTP o guardar la página en tu equipo.

    ResponderEliminar
  18. muchas gracias deja me baje ese programa para ver como funciona saludos :)

    ResponderEliminar
  19. n o funca lo probe en dos distintos

    ResponderEliminar
  20. hola potro me gustaria saber si hay alguna pagina para encristar los codigos de html y que no se puedan desencristar para que no se lleben las cosas

    gracias

    ResponderEliminar
  21. Hola Potro. Como le puedo poner como un reproductor de musica solo a una entrada? lo que quiero es que cuando habran esa entrada tengan la opcion de escuchar la cancion de la cual pongo la letra. Gracias.

    http://rockclasico1.blogspot.com

    ResponderEliminar
  22. LockerzLatinos, probablemente tienes otro script que no es compatible con jQuery.

    Encarni, no que yo sepa.

    Emilio, usando una condicional puedes hacerlo.

    ResponderEliminar
  23. muy bueno Potro :) si fuera Facebook pondria mil me gusta jaja de hecho es lo que estaba esperando, oye una duda, ¿se puede hacer esto utilizando Shadowbox verdad?, y otra duda ¿como puedo hacer que aparezca una ventana o algo asi al momento de abrir el blog, sin tener que dar clic en ninguna parte? espero que sepas Saludos

    ResponderEliminar
  24. No lo he probado junto con Shadowbox pero supongo que no debe haber problema de compatibilidad, lo cierto es que ni Shadowbox ni en este tienen la característica de poder abrirse al entrar al blog.
    Saludos.

    ResponderEliminar
  25. Ohh bueno... Elijo a Shadowbox, este se ve mejor pero pues no me gusta que solo sea para videos, aun asi me parece muy bueno y llamativo, ok pero rh se puede abrir una nueva ventana al mismo tiempo qe abres el blog?

    ResponderEliminar
  26. Que tal Potro,

    Perdon que lo que te voy a preguntar no tenga nada que ver con la entrada pero no sabia por donde preguntartelo. Mi pregunta es si se puede hacer una comparacion de texto en blogspot. Lo que quiero es que uno al escribir en un cuadro de texto una cierta palabra y darle enter que se compare si esa palabra es igual a una ya predefinida o no.

    Es basicamente para hacer un juego donde el usuario tiene q poner la respuesta correcta y lo que quiero es eso que se pueda comparar la respuesta que puso el usuario con la correcta.


    Ante todo muchas gracias y buenisima la pagina.

    Un saludo,

    Matias.

    ResponderEliminar
  27. La verdad nunca he visto algo parecido, supongo que con algún script o PHP pero no tengo la menor idea de cómo podría hacerse :/

    ResponderEliminar
  28. hola potro por aca de nuevo molestando, quisiera saber como hago para que en le pagina de inicio solo aparezca la cabecera, el crosscol y los gadget y no las entradas.
    tambien estoy esperando el tutorial sobre como dividir el crosscol en dos partes, disculpa tanta molestia.

    ResponderEliminar
  29. Hola Carlos, en una entrada anterior a esta está la explicación para ocultar elementos en ciertas partes del blog.
    Lo del tutorial ahí lo tengo anotado en la lista de espera :)

    ResponderEliminar
  30. potro como podria mandar a reproducir un video que tengo alojado en dropbox, sin necesidad de subirlo a youtube.

    gracias.

    ResponderEliminar
  31. y en que formato me lo recomendarias?

    gracias...

    ResponderEliminar
  32. Pues mira, según el sitio de Video Lightbox se puede usar cualquier tipo de archivo, pero yo traté de hacerlo tanto con videos en formato AVI, WMV, MP4 y SWF y con ninguno tuve éxito así que no sabría decirte si de verdad se puede hacer o no.

    ResponderEliminar
  33. oseea que si mi blog tiene una plantilla que no es original de google no me va a funcionar?

    ResponderEliminar
  34. Al contrario, en las plantillas hechas desde el Diseñador de plantillas de Blogger no funcionará (al menos en las que yo probé).
    Pero no es de extrañarse, ya que muy pocas cosas funcionan en esas plantillas :/

    ResponderEliminar
  35. Hola El Potro, muchas gracias por toda la ayuda que brindas con tu blog!!! ; tengo un problema mi blog es multitemático pero tengo varios post con vídeos que en una página pueden llegar a ser 6 cosa que hace lenta la carga y molesta, me podrías dar un consejo de como colocar dichos vídeos (Youtube)... Lo que yo tengo en mente es en vez de copiar los códigos y colocar los 6 vídeos cada uno con su reproductor es que los 6 estén en uno sólo y de forma ordenada ¿Se podrá?.

    O alguna otra manera que no sobrecargue la página (post) para no aburrir a mis lectores y por último si no es molestia me recomiendes un lugar donde alojar mis vídeos ya que la mayoría pasan los 15mintos y me es difícil partirlos para colocarlos a Youtube, pensé en Megavideo pero el limite de 75 molesta mucho y en blogger se demora una eternidad en cargar el vídeo que oscila entre los 60 a 100mb con 16mint a 35mint...

    ¡Gracias por tu Ayuda de antemano!

    ResponderEliminar
  36. Hola Daniel,

    UNa opción sería hacerlo como dices, colocarlos de manera ordenada y que se abran en una ventana modal.

    Otra opción podría ser con una galería de videos como la que proponen en Vagabundia:
    http://vagabundia.blogspot.com/2009/10/incrustar-multiples-videos-de-youtube.html

    Sobre el alojamiento no sabría decirte pues sólo he usado YouTube pero puedes probar en algún otro servicio como Vimeo o Metacafe.

    Saludos.

    ResponderEliminar
  37. Hola El Potro, muchas gracias por contestarme rápidamente, haré como dice en el link que me dejaste "es justo lo que buscaba"... esto ayudará a que no se sobrecargue mi página.

    Usaré Youtube nomas! pues las otros sitios no encajan con lo que quiero, en cuanto a subir los archivos te refires a esto: http://ciudadblogger.com/2009/04/alojamiento-de-archivos-gratis.html (tan bien funciona en Ubuntu) me parece mejor para subir los archivos ¿ Funciona para subir script?.

    Lastima que dieron de baja a Google Vídeo en cuanto a subida; Saludos y Muchas gracias por tu ayuda...

    ResponderEliminar
  38. Hola de nuevo!!! saliÉndome del tema como hiciste para hacer un Mapa del Sitio, soy nuevo en esto y desconozco como hacerlo por eso paso largo rato "horas" en tu blog para adquirir nuevo conocimiento jeje xD...

    ResponderEliminar
  39. Sí, en Dropbox puedes subir cualquier tipo de archivo de cualquier extensión.
    En esta entrada puedes ver cómo crear un sitemap:
    http://ciudadblogger.com/2009/09/crear-sitemap-o-tabla-de-contenido-para.html

    Saludos y qué bueno que te quedes un rato por acá ;)

    ResponderEliminar
  40. Gracias por responder jeje... aún sigo buscando como hago un Mapa del sitio como tienes en: http://ciudadblogger.com/p/mapa-del-sitio.html para hacerlo en mi blog, pero me estoy volviendo loco con tantos materiales indispensables que hay acá tanto que ya me olvidaba de que tengo que editar mi blog xD

    ResponderEliminar
  41. Esto esta excelente!!! Gracias a personas como ustedes es que los principiantes como nosotros no llegamos a frustrarnos, y llevamos a feliz termino lñas tareas que emprendemos! Gracias por su ayuda.

    ResponderEliminar
  42. Te agradezco mucho tu comentario :)

    ResponderEliminar
  43. Como puedo hacer para que los videos que se muestren esten alojados en mi hosting, y no en lugares como youtube, etc?

    ResponderEliminar
  44. Cuando hice el tutorial probé hacerlo con otros formatos de video alojados en mi hosting (pues se supone que se puede) y con ninguno tuve éxito, así que te mentiría si te digo que sí es posible hacerlo.

    ResponderEliminar
  45. Buenas,
    En primer lugar agradecerte el trabajo que realizas para ayudar a los demas. Una vez dicho esto me gustaria consultarte un problemilla. Una vez seguido todos los pasos, al abrir el video, se me ejecuta muy descentrado. Exactamente, solo se ve la mitad del video, y para poderlo ver entero he de bajar la ventana. La configuracion de pantalla q uso es de 1024 y lo he subido a mi blogger de pruebas ( creo entender q en blogger da mas de un problema )
    Podria solucionarlo cambiando alguno de los parametros ? Cual ? como?

    Muchisimas gracias de antemano y un saludo

    ResponderEliminar
  46. Hola Ramón Martinez, ¿cuál es el blog de pruebas donde lo has puesto?

    ResponderEliminar
  47. Mí querido amigo potro,Nesecito una ayuda,Míra nesecito que Mí cabeceza sea como flash me explico que hallan imagenes que se muevan por ejemplo míra la cabezera de este blog www.colorvision.blogspot.com por favor Respondeme

    ResponderEliminar
  48. Mira esta entrada, ahí está la información que necesitas ;)

    ResponderEliminar
  49. Potro,Lo qué pasa es que busco esos codigos en Edición HTML Y Le doy a Expandir y no Expandir haber,Y me dice "que no se encuentra El codigo" tambien me pasa en muchas veces que quiero poner un codigo y me dice "No se encuentra" y le doy a la opción Expandir ni tampoco,Saludos.

    ResponderEliminar
  50. Qué Pasa en caso de esto los codigos que buscamos tanto en Expandir y sí no resulta le damos a no expandir,Porqué no salen? y están bien escrito que pasa allí potro? Soy el mismo de Edwin,cdpbendicion,Gracías

    ResponderEliminar
  51. ¿Cuál es el código que estás buscando y cuál es tu blog?

    ResponderEliminar
  52. Míra mi blog es www.cdpbendicion.blogspot.com En cuanto los codigos,Nesecito muchos tanto como Raking De Estrellas,Y otras cuantas cosas me explico no me salen,Nesecito saber porqué no me salen porque Le doy a Expandir y lo hago tambien Sin expandir y me sale lo mismo,qué pasa hay?

    ResponderEliminar
  53. Muchos trucos no se aplican para esas plantillas pues no se pueden personalizar mucho. En cuanto al ranking de estrellas mira esta entrada, ahí hay un enlace donde se explica cómo poner el código faltante.

    ResponderEliminar
  54. No me funciona en Internet Explorer 9. Si funciona en Chrome..!

    ResponderEliminar
  55. En IE9 no he tenido la oportunidad de probarlo pues aún no lo tengo, pero en IE8 sí funciona, supongo que de un momento a otro el desarrollador creará la compatibilidad para esa versión de IE.

    ResponderEliminar
  56. Holas si no fuese mucha molestia me puede sacar de esta duda.

    esposible que al reproducir videos de youtube se puedan ver a pantalla completa, no logro ver esa opcion si se puede creo que seria de 10 es q la mayoria usa youtube y justo justo este servicio no esta a pantalla completa el resto que son menos usados siii pero youtube noo

    alguna solucion thanks

    ResponderEliminar
  57. La opción de pantalla completa sólo está disponible cuando el video está insertado de forma normal, cuando se usa el código para este o cualquier otro sistema parecido entonces el botón se deja de mostrar, así es la forma que YouTube maneja esas opciones.

    ResponderEliminar
  58. potro tengo una superduda :) lightbox me sirve en esta plantilla? http://royouvideo.blogspot.com/ y los archivos que estan en rojo puedo subirlos de los archivos que me genera el programa o tienen que ser los que descarge de esta pagina o cualquiera de los dos? sorry toy muy pregunton hoy xD pero ojala me respondas *-*

    ResponderEliminar
  59. a no ya es que no lo habia descargado por completo, weno ahora solo mi duda quedaria en si sirve o no en esta plantilla :S http://royouvideo.blogspot.com/

    ResponderEliminar
  60. Pues de servir, sirve. El problema con algunas plantillas es que hace que los estilos se vean afectados y es cuando la ventana puede aparecer descolocada :/

    ResponderEliminar
  61. aa tonces a usar shadowbox o lightwindow @.@

    ResponderEliminar
  62. Amigo, ya seguí todos los pasos pero no logro que se vea tal efecto, sino que al abrir el video lo abre en pantalla completa y en la misma ventana, estan fallando los scripts o algo por el estilo? Espero me puedas ayudar :)

    ResponderEliminar
  63. ¿En cuál blog lo has puesto Javier?

    ResponderEliminar
  64. Lo probe primero en uno de mis blogs http://mztubelive.blogspot.com

    ahora lo voy a probar en este blog http://gallerywwe.blogspot.com

    ResponderEliminar
  65. Extraño... o.O
    En el otro blog, el segundo, prueba poner la URL del archivo jquery.tools.min.js en lugar del que has puesto.

    ResponderEliminar
  66. Ya lo puse y ahora nisiquiera los abre :( oye me podrias pasar el codigo para que en lugar de texoto aparezca una imagen porfavor?

    ResponderEliminar
  67. Pues ahí ya no lo veo, y en el primero veo que tienes otras versiones de jQuery que seguro son las que están haciendo que no funcione. Lo de la imagen se explica en la entrada.

    Saludos.

    ResponderEliminar
  68. Buenas tardes Potro. Es posible reproducir un video directamente de Dropbox?. que con solo la url de dropbox se pueda reproducir el video, sin tener que hacer uso de youtube, vimeo u otros.

    ResponderEliminar
  69. En teoría según la página del autor se puede, pero cuando yo hice la entrada probé con archivos alojados en mi hosting (Dropbox y otro más) y nunca me anduvo.

    ResponderEliminar
  70. Una pequeña preguntilla:
    ¿Porqué los videos de youtube no salen en mi feed?
    ¿Porqué no sale la barra de abajo de los vídeos de youtube que tengo en las entradas? (Puedes ver un ejemplo aquí) Sólo se ve la imagen del vídeo, la barra no se ve hasta que no le das al play.

    ResponderEliminar
    Respuestas
    1. Eso depende del lector de feeds que uses, algunos interpretan los códigos de los videos, pero otros no.
      Lo de la barra es por la medida de tu video, si le pones una altura más grande se mostrará la barra de los controles.

      Eliminar
  71. Hola! una pregunta con respecto a los videos.Si quiero tener un blog donde solo se vean videos como documentales ¿hay algún problema en que los cargue desde mi computadora?¿después eso demorará la visualización del blog?¿que me conviene? es que queria evitar depender de youtube o vimeo. porque en algunos lugares educativos como escuelas los mismos estan bloqueados.Gracias!

    ResponderEliminar
    Respuestas
    1. Hola Vero, puedes subir videos desde tu ordenador sin problema, siempre y cuando el formato sea el correcto y el tamaño no se exceda.
      Esos los puedes subir desde el editor de entradas, sin embargo no se les podrá aplicar algún tipo de ventana modal como este Lightbox o algún otro.

      Eliminar
  72. esto al cargar la pagina puede poner lento mi blog?

    ResponderEliminar
  73. no me gusto el efecto por que no muestra la previa del video

    ResponderEliminar
  74. Perfecto, justo lo que llevo tiempo buscando.

    Gracias por compartir!!

    ResponderEliminar
  75. Potro, ¿Cómo elimino su enlace?

    ResponderEliminar
    Respuestas
    1. El de LightBox que se muestra al reproducir los videos.

      Eliminar
    2. Comprando la versión de pago, esta al ser la gratuita aparece siempre en los videos.

      Eliminar
  76. Hola potro una consulta, intente ponerlo en un blog que estoy armando y pasa que aparece el video grande, no como en los ejemplos. Sera por la plantilla que uso?? te paso el link de la entrada que arme http://tango-estilo.blogspot.com.ar/2012/06/tango-estilo.html

    Gracias

    ResponderEliminar
    Respuestas
    1. Hola Lucas, debe ser por los scripts de esa plantilla, como usa varios que requieren jQuery quizá alguno de ellos interviene con los de este lightbox.

      Eliminar
    2. Ah bueno... muchas gracias, vere que puedo hacer :)

      Eliminar
  77. Hola Potro he seguido cada uno d tus trucos y tutoriales y gracias a ti he armado mi pagina web, seguí los pasos de este tuto y al dar click sobre la imagen del video me aparece una imagen enorme de un triangulo con "!" y encima de esta imagen se reproduce el video con ligthbox me gustaria me pudieras ayudar a resolverlo, gracias por todo lo que has hecho por mi, te dejo el link de la pagina --> http://lux-on.blogspot.mx/p/shows-performance-mexico-antros-laser.html

    ResponderEliminar
    Respuestas
    1. Hola Lux-on, parece que ya lo has resuelto porque he ingresado, lo he probado y desde aquí se ve todo bien.
      Saludos.

      Eliminar
    2. Hola Potro así es, me decidí por usar shadowbox que encontré aquí mismo en tu excelente blog, gracias!!! Me encanto ya que es mas versátil, aquí les dejo el link para que le den un vistazo http://ciudadblogger.com/2010/04/shadowbox-ventanas-modales-multimedia.html

      Eliminar
  78. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
  79. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Hola Alex, cuando el blog contiene material protegido por derechos de autor no hay que dejar la dirección.
      Puedes hacer algo como lo que quieres con un tabview:
      http://ciudadblogger.com/2011/06/tabview-para-agrupar-varios-gadgets-en.html

      Saludos.

      Eliminar
  80. Hola Potro, estoy tratando de publicar una galería de imagenes lightbox en mi web pero no entiendo de programación

    Yo me he bajado el programa de la página de lightbox, lo he instalado y diseñado la galería. A la hora de insertarlo a la página (yo escojo insert to page y cargo el archivo html) aunque me carga las imágenes y me aparece a la izqda. la estructura (head, body) y me indica pincha donde quieres insertar la galería en tu página, por mas que clico, el botón de insert after me aparece inactivo

    ¿Que estoy haciendo mal? Muchas gracias!
    Trabajo en ilustración, si necesitas cualquier gráfico a cambio de la ayuda, está hecho.

    ResponderEliminar
  81. Hola Potro, estoy tratando de publicar una galería de imagenes lightbox en mi web pero no entiendo de programación

    Yo me he bajado el programa de la página de lightbox, lo he instalado y diseñado la galería. A la hora de insertarlo a la página (yo escojo insert to page y cargo el archivo html) aunque me carga las imágenes y me aparece a la izqda. la estructura (head, body) y me indica pincha donde quieres insertar la galería en tu página, por mas que clico, el botón de insert after me aparece inactivo

    ¿Que estoy haciendo mal? Muchas gracias!
    Trabajo en ilustración, si necesitas cualquier gráfico a cambio de la ayuda, está hecho.

    ResponderEliminar
    Respuestas
    1. Hola Maria Herreros, nunca he usado el programa para sitios Web así que no sabría decirte cómo usarlo, todo lo que ves aquí sólo es probado para Blogger.
      Aun así, tal vez quieras revisar esta opción:
      http://ciudadblogger.com/2010/01/lightbox-imagenes-en-ventanas-modales.html

      Eliminar
  82. Hola Potro,
    En primer lugar quiero agradecerte el trabajo y conocimiento que compartes en este blog y decirte que gracias a tus consejos hemos conseguido desarrollar una idea que hace tiempo nos rondaba por la cabeza. Ha sido un verdadero placer leer tus entradas, ya que siempre encontramos una solución sencilla a los problemas que se nos iban presentando.
    Una vez dicho esto, me gustaría plantearte dos cuestiones, por si nos puedes ayudar:
    1. Tenemos un problema de visualización de los vídeos que hemos insertado desde Vimeo en la versión móvil del blog (no sucede así con los de YouTube)
    2. Nos gustaría colocar tanto el traductor de Google como la caja de busqueda el la parte superior del blog (donde estaba la barra de navegación). ¿Es eso posible?
    la dirección del blog es: emphoka.net
    Un abrazo y muchas gracias
    Jose Belzunce

    ResponderEliminar
    Respuestas
    1. Hola José, ¿qué problema de visualización tienes con Vimeo, te refieres usándolo con este VideoLightbox? si es así, ¿en cuál entrada lo has puesto?

      Lo otro podrías hacerlo sólo si pones un gadget arriba de la cabecera, como esta entrada, pero en lugar de ponerlo debajo de, sería arriba de.
      http://ciudadblogger.com/2009/12/anadir-gadgets-abajo-de-la-cabecera-del.html

      Saludos.

      Eliminar
  83. Hola Potro, gracias por tu respuesta.
    El problema es el siguiente: Hemos publicado algunos vídeos en Vimeo y los hemos incrustado en el blog. Cuando esos vídeos se muestran en la versión Web del blog todo está bien; pero cuando se visualizan a través del móvil (Android) los vídeos se ven muy grandes, con un tamaño mayor que la columna del blog y al pulsar "play" no se reproducen, solo se escucha el sonido.
    Hemos comprobado que si, desde el mismo móvil, entramos en nuestro canal de Vimeo esos mismos vídeos se muestran y visualizan de forma correcta.
    Excepto los video tutoriales que se muestran en "Recursos DSZ" todos los vídeos que se muestran en el blog proceden de Vimeo. Este podría ser un ejemplo concreto: http://goo.gl/mZ3dq

    Un saludo y gracias, de nuevo, por tu atención.
    Jose Belzunce

    ResponderEliminar
    Respuestas
    1. Hola de nuevo, entré con un dispositivo iOS6 y el video se reproduce tanto en audio como en video, ciertamente se ven grandes, pero así es como has puesto las medidas de los videos en las entradas, quizá pueda ayudar si agregas estilos para dispositivos más pequeños, como esto:

      @media only screen and (max-width: 480px) {
      iframe {width:300px; height:auto;}
      }

      Eso haría que cuando se entre con un equipo con una resolución no mayor a los 480px entonces los videos iframe tendrán un ancho de 300px
      Pero repito, al menos desde aquí, los videos se reproducen bien.

      Eliminar
  84. Hola de nuevo, olvidé responder a tu pregunta.
    No, no utilizamos este Vídeo Lightbox.
    Gracias y disculpa el despiste

    ResponderEliminar
  85. Hola Potro,
    Gracias por tu respuesta.
    ¿Dónde tengo que agregar el código que me indicas?
    Un saludo
    Jose Belzunce

    ResponderEliminar
  86. Oye potro, vi que en tus ejemplos lograste cambiar de posición el enlace de lightbox.. me podrias decir como puede hacerlo; es que se muestra en la parte derecha de arrina y quiero que este del lado izquierdo un poco más abajo.. gracias de antemano por tu ayuda.

    ResponderEliminar
    Respuestas
    1. No he comprendido, ¿exactamente qué quieres cambiar? porque yo no he hecho nada distinto a lo que se explica en la entrada.

      Eliminar
  87. Disculpa no he podido descargar los archivos

    ResponderEliminar
  88. Disculpa no he podido descargar los archivos

    ResponderEliminar
  89. como puedo quitarle el enlace que sale en el video hacia la pagina del autor

    ResponderEliminar
  90. Buenas, una consulta en el siguiente link: http://videolightbox.com/rq/embed-video-auto-run-b.html tenemos un ejemplo para que al cargar la página aparezca una ventana mostrando el video automáticamente, este ejemplo funciona bien con IE, pero en Chrome, Firefox y otros no funciona bien, puedes detallar un poco más sobre este tema. Por otro lado si en la página web tengo un banner con efecto flash este se sobre pone a la imagen de fondo que utiliza la hoja de estilos (Estilo_Standard.css) como puedo evitar eso. Espero lo más pronto tus comentarios y ojala me este dejando entender. Saludos

    ResponderEliminar
    Respuestas
    1. No lo tenido la oportunidad de probar esa función Freddy, pero hay funciones -incluso scripts completos- que no son compatibles para todos los navegadores, eso depende mucho del desarrollador y de los códigos incluidos en dicha función.

      Para lo otro mira esta entrada, aunque ahí se habla sobre videos funciona igual para cualquier archivo SWF:
      http://ciudadblogger.com/2011/03/cuando-los-videos-se-sobreponen.html

      Eliminar
  91. Buenas tardes, querría me guiaran un poco si son tan amables. La cuestión es sencilla pero no doy con el camino correcto:

    es factible abrir la ventana modal de videolightbox a través de un menú de salto de Dreamweaver?. Es decir, introducir un menú de salto en un html con Dreamweaver con tres opciones y que al seleccionar una de esas opciones del desplegable consiga abrir el video .FLV a traves de la ventana modal del videolightbox.

    El caso es que consigo añadir a la opción value"" el enlace, y abre la ventana modal correctamente PERO NO CARGA EL VIDEO.

    Un saludo y gracias de antemano.

    Carlos.

    ResponderEliminar
    Respuestas
    1. Lo ignoro Carlos, lo que aquí hacemos es más sencillo, a decir verdad no he tratado de hacer algo más complejo como lo que explicas :(

      Eliminar
  92. Hola Potro,

    Excelente post, pero me dio un problema,....
    segui los pasos que mencionas repetidamente hasta corregir el error, pero nada.
    Mi problema es que el video sale bien a la derecha y abajo, segun la imagen.
    https://sites.google.com/site/gerardopaucar/video-lightbox/error.PNG
    Como podria corregir ello, muchas gracias.

    ResponderEliminar
    Respuestas
    1. Hola Gerardo, ¿me puedes mostrar una entrada donde te suceda ese problema?

      Eliminar
  93. he estado intentando con el programa videolightbox. pero lo primero que sale es una pestaña en el navegador con el video. cuando la cierro es cuando aparece la ventana modal del video en mi pagina mex.tl

    ResponderEliminar
    Respuestas
    1. Con el programa no lo he intentado así que no sabría decirte, sólo lo hice aplicando los códigos directo en la plantilla.

      Eliminar
  94. Hola. te cuento q hice tal y como dice en tu post, pero aun no me fucionó, al contrario, ni carga nada, queda como si mi index.html estara en blanco, puedes ayudarme por favor?

    ResponderEliminar
    Respuestas
    1. Hola Francisco, ¿me puedes indicar en dónde lo has puesto?

      Eliminar
  95. Muy buen blog!

    Una pregunta: ¿sería posible que el vídeo emergiese y se iniciase automáticamente al entrar en la web? Sólo se aplicaría al index.

    Gracias y un saludo

    ResponderEliminar
  96. Muy buen blog!

    ¿Sería posible que el video emergiese y automáticamente al entrar en la web? Sólo se aplicaría al index.

    Gracias

    ResponderEliminar
    Respuestas
    1. Hola José, el reproductor no tiene esa opción, quizá puedas valerte de esta entrada para hacer lo que deseas:
      http://ciudadblogger.com/2011/05/abrir-ventana-al-cargar-el-blog-con.html

      Eliminar
  97. Alguna forma de integrar videos de Dailymotion?

    ResponderEliminar
    Respuestas
    1. No lo he probado, pero en caso de que se pudiera sería así:

      <div id="videogallery">
      <a rel="#voverlay" href="http://www.dailymotion.com/embed/video/XXXX?autoplay=1" title="Video">Video</a>
      </div>

      Eliminar
  98. no me funcionó, gracias de todos modos por publicarlo.

    ResponderEliminar
  99. no me funcionó, gracias de todos modos por publicarlo.

    ResponderEliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

Nota: solo los miembros de este blog pueden publicar comentarios.

 
Ir Arriba Ir Abajo
I Ciudad Blogger