Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

Video Galería en el blog

En varias ocasiones me han preguntado por la posibilidad de incluir una galería de vídeos en el blog, creando así una especie de lista de reproducción en donde podamos incrustar múltiples vídeos para que los lectores puedan elegir.

Antes de presentar nada me gustaría aclarar que al introducir vídeos en nuestras, el único parámetro que verdaderamente puede verse seriamente afectado es el tiempo que tarda en cargar la página.

Me he propuesto llevar a cabo un experimento, basándome en las consultas enviadas, que permite mostrar en el blog una video-galería con una cifra ilimitada de vídeos de YouTube a incluir.

Una de las ventajas que presenta es el hecho de que muestra un solo reproductor y las miniaturas del resto de vídeos. Esto, sin duda, acelerará la carga del blog y evitará problemas al mostrar contenido.

A continuación te muestro una imagen con el resultado:




Diseño>Edición de HTML>expandimos artilugios



Localiza la etiqueta </head> en tu plantilla y añade esto justo antes:

<script src='http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js' type='text/javascript'/><link href='https://sites.google.com/site/scriptsbalcon/b/blJJbalconVidg.css' media='screen' rel='stylesheet' type='text/css'/>

Seguidamente guarda la plantilla.


Diseño>añadir gadget (elemento de página)>html-javascript




Pega este código en su interior:

<div id="blJJVideoGal3">.</div>
<div id="blJJVideoGal1">
<a href="javascript:blJJTEfun1vidjaime('BLIDVIDEO1');"><img src="http://img.youtube.com/vi/BLIDVIDEO1/1.jpg" /></a>
<a href="javascript:blJJTEfun1vidjaime('BLIDVIDEO2');"><img src="http://img.youtube.com/vi/BLIDVIDEO2/1.jpg" /></a>
<a href="javascript:blJJTEfun1vidjaime('BLIDVIDEO3');"><img src="http://img.youtube.com/vi/BLIDVIDEO3/1.jpg" /></a>
<a href="javascript:blJJTEfun1vidjaime('BLIDVIDEO4');"><img src="http://img.youtube.com/vi/BLIDVIDEO4/1.jpg" /></a>
</div>

<div id="blJJVideoGal2">Cargando ...</div><script type="text/javascript">swfobject.embedSWF(
'http://www.youtube.com/v/BLIDVIDEOGENERAL&enablejsapi=1&rel=0&fs=1',
'blJJVideoGal2',
'400','344', '8',null,null,
{allowScriptAccess: 'always',allowFullScreen: 'true'},
{id: 'balconJJrplay'}); document.write('<a href="http://goo.gl/4xVx"><img style="float:right;margin-right:10px;" src="https://lh5.googleusercontent.com/_Bvhqq3YFEx4/TVguljQ-0JI/AAAAAAAABAU/orIeAXs-ZLY/functionv.png"/></a>'); function blJJTEfun1vidjaime(id) {
var o = document.getElementById( 'balconJJrplay' );
if( o ) {o.loadVideoById( id );} } </script>

<div id="blJJVideoGal3">.</div>
<div id="blJJVideoGal1">
<a href="javascript:blJJTEfun1vidjaime('BLIDVIDEO5');"><img src="http://img.youtube.com/vi/BLIDVIDEO5/1.jpg" /></a>
<a href="javascript:blJJTEfun1vidjaime('BLIDVIDEO6');"><img src="http://img.youtube.com/vi/BLIDVIDEO6/1.jpg" /></a>
<a href="javascript:blJJTEfun1vidjaime('BLIDVIDEO7');"><img src="http://img.youtube.com/vi/BLIDVIDEO7/1.jpg" /></a>
<a href="javascript:blJJTEfun1vidjaime('BLIDVIDEO8');"><img src="http://img.youtube.com/vi/BLIDVIDEO8/1.jpg" /></a>
</div>

Ahora solo tendrás que añadir los vídeos.

Reemplaza BLIDVIDEOX por la combinación de caracteres que posee la dirección de un vídeo (ten en cuenta que debe incluirse dos veces).

Para conseguir esta combinación bastará con acceder a YouTube y posteriormente abrir un video de forma individual. En la barra de direcciones de tu navegador podrás ver algo parecido a esto:



Lo que he resaltado en color rojo es la ID o número de identificación necesario. Debes extraérselo a cada video para poder insertarlo en tu galería.

Donde dice BLIDVIDEOGENERAL tendrás que escribir la ID del vídeo que aparecerá por defecto en el reproductor al abrir el blog.

Por último, cabe decir que para añadir más vídeos solo tienes que agregar líneas como esta:

<a href="javascript:blJJTEfun1vidjaime('BLIDVIDEO8');"><img src="http://img.youtube.com/vi/BLIDVIDEO8/1.jpg" /></a>

Debes hacerlo siempre antes del cierre </div>, tanto de una lista como de otra. El código general de las listas de reproducción aparece entre las líneas de color azul (éstas incluidas) por lo que podrás, o bien poner un gran número de vídeos en las dos listas actuales o bien crear listas nuevas para ordenar el contenido.

Guarda el gadget una vez hayas terminado.

EL TERRY dice...

Hola jaime chido tu reproductor de videos; oye como puedo editar el tamaño del video y las imagenes pequeñas y poner mas imagenes pequeñas arriva del reproductor gracias

Fernaand dice...

Muuchas muchisimas gracias por este aporte. Me viene muy bien para mi videoblog que estoy haciendome!

Laura dice...

Jaime, con esta entrada si te pasaste, me gusta mucho porque es facil de instalar. ¿Sabes cuantos videos se pueden poner en cada lista? No se si es lo que quiera o tiene un numero máximo. Gracias.

Anónimo dice...

Hola Jaime, esta muy bueno este widget. Lo pondre en mi blog y ya te contaré. Gracias por tu blog.

Jaime Trujillo Escobedo dice...

EL TERRY, la primera lista (el código que recogen las primeras dos líneas resaltadas en azul) contiene las miniaturas situadas sobre el reproductor. Bastará con seguir el último paso para poder incluir más videos.

Con respecto al tamaño, es probable que amplíe la entrada para explicarlo.

Jaime Trujillo Escobedo dice...

Fernaand, me alegro de que a ti también te guste dado que se trata de un novedoso elemento y sobre el cual querría conocer vuestra opinión.

Jaime Trujillo Escobedo dice...

Laura, no existe límite alguno. Puedes, o bien ampliar las listas de reproducción aumentando el número de miniaturas (videos), o bien agregar en otro gadget html-javascript, una nueva galería.

Jaime Trujillo Escobedo dice...

Esperaré noticias tuyas, Anónimo. Si necesitas ayuda durante la instalación solo tienes que pedírmelo.

Daniel Cana dice...

Hola Jaime, es una pasada las cosas que haces. A mi me interesa mucho contar con una vídeo galería de este tipo ya que cuento en mi blog con muchos vídeos.

Jaime Trujillo Escobedo dice...

Estoy de acuerdo contigo, Daniel. Seguro que una sección en la que se muestre la galería con videos destacados resultará ideal para tus lectores (y además evitarás que tu blog se demore al cargar).

PeliculasTube dice...

Esta buena la galeria de videos no la habia visto


Una pregunta Jaime, como hago para poner los botones de " anterior" y "siguiente" para navegar por las entradas asi como tienes en este blog?

Fabrizio dice...

Una pasada Jaime, muy útil para el blog de mis estudiantes ty de mis profesores. Muchiiiisimas gracias como siempre.

Jaime Trujillo Escobedo dice...

Fabrizio, estoy encantado de saber que esta galería te ayudará a mostrar contenido en tu blog dedicado a los alumnos y a los profesores.

Jaime Trujillo Escobedo dice...

¡Gracias PeliculasTube! Supongo que te refieres al truco que permite reemplazar los enlaces de navegación por imágenes o iconos. Si es así, accede a esta entrada para leer el tutorial.

PeliculasTube dice...

Si revise la entrada, pero es diferente, es que veo que en tu blog los botones de anterior y siguiente, tienen efecto al poner el cursor encima y se ven bien me gustaria algo asi.

Gracias por tu ayuda.

Jaime Trujillo Escobedo dice...

Ya veo, te refieres al efecto hover que produce el cambio de imagen, oscureciendo así el botón. PeliculasTube, atento a mis próximas entradas ya en alguna trataré el tema: 'Imagen que cambia al pasar el cursor', de manera que puedas crear tus botones e incluir su correspondiente código en el lugar del de los enlaces actuales.

PeliculasTube dice...

Ok,estare en contacto con tu blog gracias y saludos.

Abel3D dice...

Hola Jaime, te pasaste con este truco, muy bueno, solo una consulta. Yo tengo muchos videos que quisiera poner en el mismo gadget pero, el truco muestra 1 video y en la parte inferior o superior aparecen los recuadros pequeños que son 4, qué pasa si tengo mas de cuatro recuadros de video? como aparecen esos recuadritos, se crea automaticamente un tipo de scroll de izquierda a derecha para seguir viendo mas cuadritos? o se apilan de cuatro en cuatro uno debajo del otro?

Seria excelente que se genere un tipo de scroll para ir con el cursor de lado a lado y los recuadritos se muevan de izquierda a derecha despejando el resto, o algo asi como lo que se ve en el enlace inferior. No se si me expliqué.

http://alt1040.com/2008/09/como-poner-una-galeria-de-fotos-en-tu-blog-facilmente#comment-455938

Jaime Trujillo Escobedo dice...

Abel3D, te explicaste a la perfección. El actual código no dota de dicha característica por lo que las miniaturas se acumularán en forma de cuadrícula. Pero no debes preocuparte dado que a continuación te ofrezco el complemento:

Diseño>Edición de HTML>expandimos artilugios

Añade esta línea bajo el primer código insertado (del primer paso):

<style>#blJJVideoGal1 {height: 80px;overflow: auto;}</style>

Con eso lograrás que se muestre un listado de miniaturas y una barra de desplazamiento vertical para seleccionar el video.

Con respecto al desplazamiento horizontal, déjame hacer algún que otro experimento dado que aún no consigo un resultado aceptable.

noemi dice...

Esto está genial, pero a mí además me gustaría saber cómo se puede modificar el tamaño, ancho y alto del video general. gracias. tienes una página estupenda!

Jaime Trujillo Escobedo dice...

Noemi, fíjate en la línea: 'blJJVideoGal2',
'400','344', '8',null,null... La cifra 400 indica el ancho del reproductor mientras que 344 el alto. Modifica cada valor para editar su tamaño.

Con Pan y Vino dice...

Jaime Trujillo Escobedo, eso lo he intentado y sólo me modifica el alto, pero el ancho permanecece igual , ponga el valor que ponga. Gracias

Con Pan y Vino dice...

Pasa una cosa muy curiosa... en el Google Crome no se ve el cambio, pero en Internet Explorer sí. Hay alguna manera de arreglarlo? gracias :-)

Con Pan y Vino dice...

Perdona de nuevo, pero habría alguna forma de poner título a los videos para que la gente sepa de qué se trata y poder elegir sin tener que pinchar en ellos?

Puedes echar una ojeada a ver cómo me ha quedado siguiendo tus explicaciones. Saludos

Gracias. Noemi

Jaime Trujillo Escobedo dice...

Con Pan y Vino, agrega esta línea bajo las primeras que incluiste en la plantilla:

<style>#balconJJrplay{width: 400px;}</style>

Aumenta o disminuye la cifra (400) para modificar el ancho. Si no obtienes cambio alguno házmelo saber.

Jaime Trujillo Escobedo dice...

Noemi, para titular cada vídeo incluye en el código el atributo title de la siguiente forma:

<a href="javascript:blJJTEfun1vidjaime('BLIDVIDEO2');"><img title="TITULO VIDEO AQUI" src="http://img.youtube.com/vi/BLIDVIDEO2/1.jpg" /></a>

Reemplaza TITULO VIDEO AQUI con el título del vídeo.

Con respecto a lo de Google Chrome, trataré de solucionar el problema. Pasé por tu blog y tuve la suerte de descubrir tus maravillosas listas de reproducción en donde explicas con esmero un gran número de recetas.

Con Pan y Vino dice...

Gracias por todo, creo que ya está solucionado porque se ve perfectamente en IE y en el GCrome. Y ya he puesto los títulos también. Muchísimas gracias!!!!


Noemi

Jaime Trujillo Escobedo dice...

Cierto Noemi, funciona sin problemas en cualquier navegador. Ahora toca ampliar las listas de reproducción y disfrutar de ello.

Javier dice...

Hola Jaime, lo primero felicitarte por el gadget, sencillo y elegante. Te quería comentar que me ha surgido un problema ya que no puedo cambiar el ancho del video principal y se me sale de la colmuna de blogger. Lo puedes obsverbar en este blog de pruebas que tengoMi Blog y quería saber cómo puedo solucionar este problema ya que he cambiado los valores que mencionabas en otro post y nada, sigue igual.

Muchas gracias.

Javier dice...

Perdona, ya lo conseguí :) Gracias y suerte con el blog!

Javier dice...

Lo que si me pasa, es que no consigo añadir el título a los videos con el atributo title...

Jaime Trujillo Escobedo dice...

Javier, el atributo title se debe incluir con espacios dentro del código de la imagen. Revisa si lo has hecho.

Ignacio dice...

Hola tengo una pregunta no se como centrar el cuadro donde se ve el vídeo respecto a los iconos pequeños de los vídeos existentes, y también no se como centrar el título del blog, saludo y gracias, para que veas lo que te pregunto el blog es: http://videosmontajesmoscas.blogspot.com/

Jaime Trujillo Escobedo dice...

Ignacio, incluye antes los vídeos en la galería para que pueda aconsejarte los pasos a seguir.

Ignacio dice...

Hola Jaime Ya he puesto los videos en http://videosmontajesmoscas.blogspot.com/ me gustaria que me dijeses como hacer lo siguiente:
1 como centrar el video principal en la pagina
2 Como hacer un enlace desde otro blog para que al darle valla al blog de los videos y se ponga en marcha uno de ellos el que viene en el enlace. Gracias

Jaime Trujillo Escobedo dice...

Ignacio, para centrar el reproductor debes incluir esta línea en el gadget html-javascript utilizado para mostrar la video-galería:

<style>#balconJJrplay {margin-left: 28%;}</style>

Guarda el gadget y comprueba el resultado.

Para crear el enlace del que hablas, accede a esta otra entrada.

Ignacio dice...

Hola soy ignacio de nuevo como puedo hacer la misma galería pero para enlaces url de otros vídeos que no sean de you tube,gracias.

Jaime Trujillo Escobedo dice...

Ignacio, para mostrar vídeos pertenecientes a una plataforma distinta sería necesario otro código. Puede que en un futuro os presente una galería que cumpla con la característica que pides.

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo