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
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
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
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
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
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/.......
http://img.youtube.com/vi/.......
aunque tmabién pue de usarse esta otra:
http://i.ytimg.com/vi/.......
Hola JMiur, bueno primero te agradezco por responder mi comentario anterior!!
ResponderBorrarAhora 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!
Porque Internet Explore no posee la propiedad outline así que, no la muestra.
ResponderBorrarOOOOOHH... Pero como puede haber un navegador tan malo???
ResponderBorrarBueno, otra de las miles razones para Cambiarse a Firefox..
Lamentablemente la mayoria de mis visitantes usan Explorer.. Pero bueno, que se hace :S
Pero loco hay mil soluciones para eso, justo la etiqueta outline tenes que usar?
ResponderBorrarJMiur, 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?
Shark_Bloody:
ResponderBorrarEs 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.
Gracias.
ResponderBorrarEsto nos da mas posibilidades, solo es cuestión de ir probando.
Saludos Master
Es algo que uso habitualmente, Claudio; ahorra mucho trabajo :D
ResponderBorrarHola JMiur, no logro reproducir los videos cliqueando en las miniaturas. Revisé el código y no encuentro el error. Me puedes dar una mano?.
ResponderBorrarMi blog de prueba: http://newavi.blogspot.com/
Revisa esto:
ResponderBorrar<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');">
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?
ResponderBorrarEl contenedorYT es sólo temporal, luego es reemplazado por el objeto de Flash; por eso no habrá efectos.
ResponderBorrarUtiliza algo así:
<center>
<div id="contenedorYT"> xxxxxxx </div>
</center>
o así:
<div style="text-align:center;">
<div id="contenedorYT"> xxxxxxx </div>
</div>
Gracias JMiur, funcionó con la primer opción, :)
ResponderBorrarGraciasssssss...ha sido de mucha utlidad...definitivamente me suscribo....besos
ResponderBorrar:P
Me alegro que te sirviera Elizabetha. Es muy simple y ahorra mucho trabajo.
ResponderBorrarSaludos Jmiur.
ResponderBorrargracias 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
Sí, es posible. Una alternativa sería algo así:
ResponderBorrar<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.
Muchas muchas gracias Jmiur, ahí a quedado justamente como queria :)
ResponderBorrarPerfecto :D
ResponderBorrar