JMiur [E]

Utilizar las miniaturas automáticas que provee YouTube es sencillo, hace poco, mostraba la forma de emplearlas para armar listas de videos sin necesidad de insertarlos lo que ayuda a reducir el tiempo de carga de las páginas.

Esas miniaturas son automáticas, basta saber el ID del video para generar la URL de las imágenes:

http://www.youtube.com/watch?v=jEOkxRLzBf0

Estas tres son miniaturas de 130x97 pixeles aproximadamente:

http://img.youtube.com/vi/jEOkxRLzBf0/1.jpg
http://img.youtube.com/vi/jEOkxRLzBf0/2.jpg
http://img.youtube.com/vi/jEOkxRLzBf0/3.jpg



No son las únicas. En nealgrosskopf.com nos muestran varias más.

La imagen por defecto es elegida por quien sube el video. Se corresponde con la miniatura 2.jpg pero tiene 120x90 pixeles, la encotramos en esta URL:

http://img.youtube.com/vi/jEOkxRLzBf0/default.jpg


Hay otra de mayor tamaño llamada 0.jpg que tiene 320x240 pixeles:

http://img.youtube.com/vi/jEOkxRLzBf0/0.jpg


Así como hay videos de alta definición, también hay imágenes de 130x97 de alta definicion, son hq1.jpg y hq3.jpg:

http://img.youtube.com/vi/jEOkxRLzBf0/hq1.jpg
http://img.youtube.com/vi/jEOkxRLzBf0/hq3.jpg


La imagen hq2.jpg es más grande, tiene 480x360 pixeles lo mismo que la imagen hqdefault.jpg que es la que tiene la mayor definición:

http://img.youtube.com/vi/jEOkxRLzBf0/hq2.jpg
http://img.youtube.com/vi/jEOkxRLzBf0/hqdefault.jpg


En todos los casos, nos basamos en el ID del video y usamos como base la URL:

http://img.youtube.com/vi/.......

aunque tmabién pue de usarse esta otra:

http://i.ytimg.com/vi/.......

18 comentarios:

PedroX  

Hola JMiur, bueno primero te agradezco por responder mi comentario anterior!!

Ahora vengo con otra pregunta, resulta que agregue en las dos sidebars y en el main, un OUTLINE de 2px.. pero en Internet explorer no se ve y en Firefox si.. POR QUE??

Gracias!

Responder
JMiur  

Porque Internet Explore no posee la propiedad outline así que, no la muestra.

Responder
PedroX  

OOOOOHH... Pero como puede haber un navegador tan malo???

Bueno, otra de las miles razones para Cambiarse a Firefox..

Lamentablemente la mayoria de mis visitantes usan Explorer.. Pero bueno, que se hace :S

Responder
Shark_Bloody  

Pero loco hay mil soluciones para eso, justo la etiqueta outline tenes que usar?

JMiur, excelente, revivir viejos temas y ampliarlos mas, me viene perfecto para el diseño que le di a los reproductores incrustados (que en realidad no estan incrustados :P ).

¿Funciona con todos los videos esa cap nº 0, o es solo para los nuevos?

Responder
JMiur  

Shark_Bloody:
Es verdad, hay otras soluciones :)

Por lo que probé, funcionan con todos aunque no estoy seguro si las de alta definición también, imagino que sólo con aquellos videos que están en HD.

Responder
Claudio  

Gracias.

Esto nos da mas posibilidades, solo es cuestión de ir probando.

Saludos Master

Responder
JMiur  

Es algo que uso habitualmente, Claudio; ahorra mucho trabajo :D

Responder
Manfenix  

Hola JMiur, no logro reproducir los videos cliqueando en las miniaturas. Revisé el código y no encuentro el error. Me puedes dar una mano?.
Mi blog de prueba: http://newavi.blogspot.com/

Responder
JMiur  

Revisa esto:
<a href="javascript:cargarVideo(ID_VIDEO);">
el ID del VIDEO debe estar entre comillas simples. Este era el ejemplo del post:
<a href="javascript:cargarVideo('uKkbn-pdCMA');">

Responder
Manfenix  

Solucionado el problema. Ahora tengo otro, intenté alinear en el centro de la entrada, el reproductor, con style="text-align:center;" ubicando este código dentro del div del contenedorYT y no se alinea. Donde está el error?

Responder
JMiur  

El contenedorYT es sólo temporal, luego es reemplazado por el objeto de Flash; por eso no habrá efectos.

Utiliza algo así:
<center>
<div id="contenedorYT"> xxxxxxx </div>
</center>

o así:

<div style="text-align:center;">
<div id="contenedorYT"> xxxxxxx </div>
</div>

Responder
Manfenix  

Gracias JMiur, funcionó con la primer opción, :)

Responder
Elizabetha Souvre  

Graciasssssss...ha sido de mucha utlidad...definitivamente me suscribo....besos

:P

Responder
JMiur  

Me alegro que te sirviera Elizabetha. Es muy simple y ahorra mucho trabajo.

Responder
Pavelkapaz  

Saludos Jmiur.
gracias por esta información ya que me fue de mucha ayuda para generar una nueva forma de colocar los videos en mi blog. Pero me surge una consulta respecto a diseño CSS. Sucede que hice una identificación para que cuando publique los videos la imagen salga con un borde de color azul... la cosa es que queria colocarle un icono de play sobre la imagen que utilice para el video.

Mira, este es el icono que deseo usar: CLICK AQUÍ
Este es la forma en que se ve publicado el video: CLICK AQUÍ
Y este es el resultado que me gustaria obtener: CLICK AQUÍ

Nose si esto es posible, ya que todavia desconosco un monton de codigos. te agradeceria cualquier ayuda. :X

Responder
JMiur  

Sí, es posible. Una alternativa sería algo así:

<div style="text-align: center;position:relative;" id="videos">
<a .......><img .............></a>
<img style="position:absolute;left:270px;top:70px" src="http://www.open-street.eu/img/icons/play.png" />
</div>

en el DIV agregas la propiedad position:relative;
luego, colocas la nueva imagen con estas propiedades:
position:absolute;left:270px;top:70px
donde left y top posicionan la imagen en determinado lugar tomando como top 0 left 0 la esquina superior izquierda de ese DIV.

Responder
Pavelkapaz  

Muchas muchas gracias Jmiur, ahí a quedado justamente como queria :)

Responder
JMiur  

Perfecto :D

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR