Las miniaturas de YouTube : Vagabundia

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!
JMiur: Porque Internet Explore no posee la propiedad outline así que, no la muestra.
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
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?
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.
Claudio - Poca Tinta: Gracias.

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

Saludos Master
JMiur: Es algo que uso habitualmente, Claudio; ahorra mucho trabajo :D
Manuel Alberto: 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/
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');">
Manuel Alberto: 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?
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>
Manuel Alberto: Gracias JMiur, funcionó con la primer opción, :)
Liz Hopps: Graciasssssss...ha sido de mucha utlidad...definitivamente me suscribo....besos

:P
JMiur: Me alegro que te sirviera Elizabetha. Es muy simple y ahorra mucho trabajo.
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
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.
Pavelkapaz: Muchas muchas gracias Jmiur, ahí a quedado justamente como queria :)
JMiur: Perfecto :D

¿Quiere dejar un comentario?

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

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

Vagabundia

Las miniaturas de YouTube

18 comentarios:

¿Quiere dejar un comentario?

entradas relacionadas

la puerta abierta

las etiquetas

Páginas