JMiur [E]

Claro que podemos incrustar múltiples videos de YouTube sin nada especial, copiamos los códigos y listo pero, eso significará que nuestra página se hará muy lenta. También es cierto que podemos recurrir a algún truco que resuelva esto o usar alguna ventana modal.

Otra posibilidad y una buena idea es la que muestran en Nine-One-One... Need Code, Help! que utiliza la librería SWFobject y el API del mismo YouTube.

Si ya tenemos esa librería en nuestro sitio, no hace falta agregarla. Si no la tenemos, podemos hacerlo poniendo esto antes de </head> o directamente en una entrada:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
Ahora, donde querramos que se vea nuestra lista de videos, escribiremos lo siguiente:
<div id="contenedorYT">Cargando ...</div>

<script type="text/javascript">
swfobject.embedSWF(
'http://www.youtube.com/v/ID_VIDEO_1&enablejsapi=1&rel=0&fs=1',
'contenedorYT',
'425','344', '8',null,null,
{allowScriptAccess: 'always',allowFullScreen: 'true'},
{id: 'reproductorYT'});

function cargarVideo(id) {
var o = document.getElementById( 'reproductorYT' );
if( o ) {o.loadVideoById( id );}
}
</script>
Todo eso en una sola línea si se trata de una entrada de Blogger.

ID_VIDEO_1 es el ID del primer video, el que aparecerá por defecto
425 y 344 son el ancho y alto del video
contenedorYT es el ID del DIV donde se mostrará el video
reproductorYT es el ID del reproductor en si mismo

Debajo, pondremos nuestra lista de videos a reproducir, en este caso, usando las mismas miniaturas que nos provee YouTube:
<div class="videominiaturas">
<a href="javascript:cargarVideo('ID_VIDEO_1');"><img src="http://img.youtube.com/vi/ID_VIDEO_1/1.jpg" /></a>
<a href="javascript:cargarVideo('ID_VIDEO_2');"><img src="http://img.youtube.com/vi/ID_VIDEO_2/1.jpg" /></a>
.......
<a href="javascript:cargarVideo('ID_VIDEO_N');"><img src="http://img.youtube.com/vi/ID_VIDEO_N/1.jpg" /></a>
</div>
Vale recordar que el ID es una serie de once caracteres alfanuméricos que podemos tomar desde cualquier página del servicio. Por ejemplo, si el video fuera este:
http://www.youtube.com/watch?v=uKkbn-pdCMA
nuestro enlace sería así:
<a href="javascript:cargarVideo('uKkbn-pdCMA');"><img src="http://img.youtube.com/vi/uKkbn-pdCMA/1.jpg" /></a>
El resultado, será un video incrustado y debajo, una serie de miniaturas donde podremos hacer click para ir ejecutándolos uno a uno y que se irán cargando de manera dinámica.

150 comentarios:

Huerta  

Me viene de lujo, para mi videoblog, ahora me pongo,gracias

Responder
Unknown  

Muy bueno, aunque yo uso Dailymotion :P

Responder
Unknown  

¡¡¡guay chuli qué ingenio!!! :)
Estaba buscando...no Jmiur no estaba buscando esto...estaba buscando la cajita esa que comencé a incluir en la plantilla y nunca terminé...bien a trabajar ahora!!! ...esperando salga todo bien, le saluda muy atte. que tenga usted un día bonito adeus

Responder
Roudy Capella  

Que bien, me preguntaba ¿Como hacen los de youtube para mostrar las miniaturas de los videos? Con este post me ha quedado claro.

Responder
blogdepruebajo  

Hola JMiur
Necesito un formulario de contacto para poner en un post, que contenga nombre, e_mail, comentario, enviar... Y si puede ser que me llegue a mi correo el envío con IP. ¿cómo lo puedo hacer?
Saludos, muchas gracias.

Responder
Anónimo  

Interesante, quizás lo aplique a mi blog ;-)

Responder
Unknown  

Te quedó muy bueno. Se le pueden dar usos ingeniosos a eso :)

Responder
Jaime Trujillo Escobedo  

¡¡Flipante!! Jajaja, no puedo expresarlo de otra forma. Un truco genial JMiur, y lo mejor es que es sencillo de implementar. Vaya, que en pocos minutos tenemos toda una galería de vídeos en el blog ;).

Responder
EM2.0  

Y con videos que no sea de youtuve, el otro que nos enseñaste no? A tí no te gustan los Beatles verdad????:D

Responder
EM2.0  

Hola venía a preguntar como siempre ¿como se hace algo como lo que he encontrado en está página? http://huellasdecuatropatas.blogspot.com/, música y vídeo fusionado en una imagen y sin que pese la carga y empieza a sonar según entras en el blog, aparte de que el blog es de un buen gusto genial.

Responder
JMiur  

Pués sí, parece interesante y fácil de usar, da muchas posibilidades y ahorra espacio y tiempo de carga :)

blogdepruebajo: Podrías probar con emailmeform

Dña.Urraca: Esto sólo sirve para YouTube. Lo que ves en ese blog parecería ser un widget de mixpod

Responder
EM2.0  

Jefé aunque fuera una chorrada nuevamente me has vuelto a ayudar, por fin he conseguido la música que buscaba sin mucha complicación, claro que para conseguirla he tenido que registrarme con domicilio en Gibraltar, manda egs.

Responder
EM2.0  

Toma para que no me llames egoista http://www.mixpod.com/playlist/33251416 ; así dejas descansar un ratin a los Beatles que están dando la lumbalgia :D . Es mi biografía acústica desordenada.

Responder
JMiur  

me alegra que sirviera y funcionara :D

Responder
Salman Arshad  

Gracias!

I revised the YouTube multiple videos script a few days ago; the updated version of the script is available at:

YouTube JavaScript Player with Playlist

Responder
Anónimo  

rayos! es bastante funcional y lo quiero ocupar pero lamentablemente no le entiendo a esta parte:

contenedorYT es el ID del DIV donde se mostrará el video
reproductorYT es el ID del reproductor en si mismo

si me podrias ayudar con eso, gracias

Responder
JMiur  

contenedorYT es el DIV donde la librería SWFobject incrustará el reproductor, donde se verá:

<div id="contenedorYT">Cargando ...</div>

Allí, la librería colocará las etiquetas OBJECT con el reproductor y ese reproductor tendrá como ID reproductorYT, será el nombre que se le dará y debe ser un numbre único no puede haber dos con el mismo ID.

Responder
LinfoWanka  

Hola soy nuevo en esto, tengo un blog pero yo uso el reproductor JWplayer y con un playlist XML, pero este me parece interesante, solo que quisiera colocarlo un logo personalizado, se puede?.
Es muy util tu blog, felicitaciones....me sirvio para poner el JWplayer en mi blog

Responder
Gearheads  

Anda perfecto, pero una pregunta. Hay alguna manera para que se reproduzcan seguidos sin darle play, osea termina uno empieza el otro como un loop... :D

Saludos

Responder
JMiur  

Fi´jate en la página del autor, allí hay algunas explciaciones al respecto.

Responder
HLVS  

NO ENTIENDO ESTO DE AQUI
contenedorYT es el ID del DIV donde se mostrará el video

por favor me dices cual es la ID del DIV

Responder
JMiur  

Esto dice el código del post:

<div id="contenedorYT">Cargando ...</div>

en ese DIV es donde SWFobject, coloca las etiquetas del reproductor; es decir, donde se quiere verlo.

Responder
Manuel Alberto  

Hola JMiur, he aplicado con éxito, en mi blog Avibert, esta forma de ver videos de Youtube. Leyendo skins de Youtube, surge la siguiente pregunta, no se puede aplicar CSS al contenedor de YT para darle un marco al reproductor?. Saludos, :)

Responder
JMiur  

Manfenix:

El DIV contenedorYT es "eliminado" por el script y "reemplazado" por una etiqueta OBJECT cuyo id es reproductorYT. Como las etiquetas OBJECT tienen pocas propiedades, lo que puede hacerse es colocar ese contenedor (el que va a desaparecer) dentro de otro:

<div id="contenedorEXTERNO">
<div id="contenedorYT"> Cargando ... </div>
</div>

Ahí lo llamo contenedorEXTERNO. En ese, podemos colocar propiedades para enmarcar el contenido que será el reproductor en si mismo. Un ejemplo:

#contenedorEXTERNO {
background-color: yellow;
border: 2px solid red;
height: 300px;
margin: 0 auto;
padding: 10px;
text-align:center;
width: 500px;
}

background-color si quieres que haya un fondo; border el borde que quieras
width y height similares o iguales al tamaño del reproductor que uses
margin lo usas para centrar todo
padding si quieres separar el borde del reproductor
text-align para centrar el contenido

Responder
Manuel Alberto  

Ok JMiur, ya mismo me pongo en tarea de aplicarlo, gracias :)

Responder
Manuel Alberto  

Todo salió bien JMiur. Ya está aplicado el marco al reproductor. Solo resta encontrar la combinación adecuada de background y border con el fondo del post. Gracias nuevamente!!! ;)

Responder
JMiur  

Me alegro que se haya comprendido, Manfenix :D

Responder
Anónimo  

Use este truco que mencionas aqui en mi blog de pruebas y funciono bien

http://etbpruebas.blogspot.com/2009/11/prueba-de-insertar-varios-videos.html

Pero en mi blog normal (http://eltecblog.blogspot.com)no se carga completo. Solo se cargan las miniaturas y se queda la frase de "Cargando..."

¿Se bloquea por otro script que tenga en mi blog o a que se debe? De antemano, gracias

Responder
JMiur  

No, nodeberías tener problemas. Aqui esta funcioandno con decenas de otros scripts. Tendría que ver un eemplo para decirte porque ahora, en tu blog, no lo veo .

Responder
Anónimo  

Jejeje perdon, es que lo borre porque no se veia nada. Lo puse como una entrada antigua. Esta aqui:

http://eltecblog.blogspot.com/2009/10/algo-de-hard-rock.html

Sigue el problema, nadamas se ve el "Cargando..." y las miniaturas. Se ve asi:

http://lh3.ggpht.com/_15m-mj0BgAA/SxHGL7beM4I/AAAAAAAACrI/5EeLAb9J8qA/s800/Captura.jpg

Responder
JMiur  

Lo que no veo en tu ejemplo es que esté cargada la librería SWFobject.

Responder
Julio cesar  

simplemente genial y funciona, no sabia este truco!!!! pero hay una cosa, en mi pagina hay una seccion videos llamada videos.php y este archivo lo llamo con una funcion ajax Cargar('videos.php','contenido') a mi pagina principal, cuando carga el archivo asincronicamente simplemente ya no funciona, alguien sabe como solucionar este detalle?....xfa!!!!!


salud!

Responder
Brixton Records  

Hola: En cuanto vi este comentario se me ocurrieron un par de entradas en las que utilizarlo pero llevo ya unos días intentandolo sin éxito. Consigo la ventana principal del reproductor y las miniaturas pero los videos de las miniaturas no se reproducen. Este es mi blog de pruebas: http://frogakbrixton.blogspot.com/
¿Alguna idea de donde puede estar el error? Lamento volver sobre un tema antiguo y muchas gracias por anticipado.

Responder
JMiur  

Brixton kat:
Lo primero que veo es que estás cargando los videos sin las comilla. Por ejemplo, unoc ualquiera de ellos dice esto:

<a href="javascript:cargarVideo(2CmPv9jUQtA);">

y deberías escribirlo así:

<a href="javascript:cargarVideo('2CmPv9jUQtA');">

El ID, debe ir entre comillas simples : '2CmPv9jUQtA'

Responder
Brixton Records  

¡Genial! Mil gracias y disculpas por mi ignorancia. Aquí puedes ver el resultado: http://brixtonrecords.blogspot.com/2009/08/historia-del-ska.html (anteriormente los links eran de simple texto). Feliz año 2010 y muchas gracias de nuevo.

Responder
JMiur  

Perfecto,Brixton kat :D

Responder
Brixton Records  

Estimado JMiur:

Disculpa que vuelva "a la carga" con dudas relacionadas con esta solución de incluir vídeos pero es que me es tremendamente interesante para el blog ;)

Tras incluir, con tu ayuda, un primer post con múltiples vídeos he incluido un segundo post con multiples vídeos incrustados. Cuando se visualizan los posts individualmente ("ver entrada") todo funciona perfectamente y no hay ningún problema.

Sin embargo cuando se visualizan en la página principal del blog ("ver blog") el reproductor de uno de los posts "prevalece" sobre el del otro post. Así, todas las miniaturas de ambos posts se reproducen únicamente en el reproductor de uno de los posts (a pesar de haber incluido diferentes ID de reproductor y contenedor para cada post). Este es mi blog de pruebas: http://frogakbrixton.blogspot.com/

He podido comprobar que ocurre lo mismo en el blog de Manfenix (quien realizó comentarios en este post y aplica esta solución en su blog).

¿Hay alguna posibilidad de evitar este efecto o solamente es posible incluir vídeos múltiples de esta manera en un solo post por página?
Muchas gracias por anticipado y disculpas de nuevo por mi ignorancia

Responder
JMiur  

Como cada uno de estos reproductores tiene un ID que lo identifica, si colocas dos con el mismo ID, sólo funcionará uno. Es decir, habrá dos con el mismo nombre y el script funcionará parcialmente.

Si es posible colocar dos modificando los IDs, no sabría decirte porque no lo he probado; deberías tener todo por duplicado o cambiar las funciones de alguna manera y crear un script que hiciera eso.

Responder
Brixton Records  

Gracias por tu respuesta. Me pongo a investigar siguiendo tus sugerencias. Saludos.

Responder
Brixton Records  

Problema solucionado. Tal y como me indicabas el "quid" de la cuestion son los IDs. Así, en mi caso, he identificado cada reproductor (reproductotYT01 y reproductor02) y tambien cada contenedor (contenedor01 y contenedor02). Pero tambien es necesario "indicar" a cada miniatura dónde debe reproducirse para lo que se ha de modificar:

function cargarVideo01
function cargarVideo02

e indicarlo en cada miniatura
(href="javascript:cargarVideo01 y href="javascript:cargarVideo02). No se si técnicamente es correcto pero funciona. Saludos.

Responder
JMiur  

Todo lo que funciona es técnicamente correcto :D

Responder
Csi_yon  

JMiur te lo agradesco mucho me ha sido muy util para los videos y entrevistas y funcionan perfectamente.

Responder
JMiur  

Me alegro que fuera útil, Claudia :D

Responder
robinsonchar  

Hola JMiur
EL Potro me han enlazado desde Ciudad Blogger para encontrar este truco que vengo buscando desde hace rato. Sin embargo me gustaria saber como hago para colocar solo numeros en vez de la imagen pequeña, pues el espacio donde lo quiero colocar es muy pequeño(sidebar). Visita el siguiente link y veraz de que te estoy hablando, www.maspublicidadymarketing.com (parte superior derecha -Videos destacados-) Gracias .
Bye.

Responder
JMiur  

En lugar de poner un DIV con los enlaces y las miniaturas:

<div class="videominiaturas">
<a href="javascript:cargarVideo('ID_VIDEO_1');"><img src="http://img.youtube.com/vi/ID_VIDEO_1/1.jpg" /></a>
...................

puedes cambiar las imágenes:
<img src="http://img.youtube.com/vi/ID_VIDEO_1/1.jpg" />

por un texto o números tal como quieres:

<div class="videominiaturas">
<a href="javascript:cargarVideo('ID_VIDEO_1');"> 1 </a>
<a href="javascript:cargarVideo('ID_VIDEO_2');"> 2 </a>
<a href="javascript:cargarVideo('ID_VIDEO_3');"> 3 </a>
...................

Responder
Manuel Alberto  

De tanto en tanto vuelvo al post para leer los nuevos comentarios y así conocer novedades y seguir aprendiendo. Y bien que lo hice por que de esta manera me entero del problema indicado por el amigo Brixton kat.
Siguiendo sus indicaciones, solucioné el incoveniente. :)
Gracias Brixton !!!

Responder
Manuel Alberto  

Siguiendo con el mismo tema, a pesar de la solución que apliqué, esto solo era parcialmente útil, tomando como referencia páginas con hasta 7 entradas, como es mi caso, porque cuando listaba las entradas por categoría, por ejemplo "Videos", la situación era distinta. Los videos mútiples mostrados podían superar ese número. Por eso opté por asignar a cada video múltiple, lo que indica Braxton, pero numerándolos en forma correlativa. De este modo, todos los ID son distintos sin ninguna posibilidad que se repitan.
Las imágenes valen más que mil palabras:

Video

Espero que le sea útil a alguien más.
Saludos JMiur, :)

Responder
Bilosony2™  

Tengo un problema no entendi bien la perte del "contenedorYT" y "reproductorYT". Me podrias dar algun ejemplo para saver donde se ubican?? Porque no las encuentro para ponerlas en el div :(

Saludos!!

Responder
JMiur  

Dice el post:

<div id="contenedorYT">Cargando ...</div>

Es donde se mostrarán los videos cuando se ejecute el script.

reproductorYT es el ID que le daremos al objeto de Flash con el reproductor y es un dato que colocamos en la función swfobject.embedSWF:

swfobject.embedSWF(
.......
{id: 'reproductorYT'});

Responder
Bilosony2™  

No entendi igual :( pero me acabo de dar cuenta que no me salia porque no lo hacia en una sola linea..dios!!! :O esos tan pequeños detalles llegan a causar problemas jeje pero el resultado ya esta lo puedes aver en una mis Galerias de videos de graffitis paso a paso probe todo y hasta ahora anda todo perfecto asi que seguro en estos dias se lo implementare a mi otras galerias :P

Saludos!!! :D

Responder
Amador López Criado  

Hola JMiur. Una vez más me agarro a tu ayuda. Lo acabo de implementar sin problema. Gracias. Un saludo. :)

Responder
Amador López Criado  

Hola de nuevo. Me acabo de dar cuenta que una de las miniaturas se ve de un tamaña distinto. Aunque es un blog de pruebas y la entrada final la haré en otro blog y con otros videos ¿podrías adivinar el motivo? Éste es la dirección: http://tizadecolor.blogspot.com/2010/05/anadir-videos_05.html. Gracias de nuevo.

Responder
JMiur  

No todas las miniaturas de YouTube tienen el mismo tamaño, algunas son levemente diferentes; simplemente, fuerza ese tamaño en el CSS para que queden iguales:

.post img, table.tr-caption-container {
.......
height:90px;
width:120px;
}

Responder
Amador López Criado  

¡Perfecto! Gracias maestro. :D

Responder
CEPA Don Juan I  

Y ¿Se puede poner debajo de cada miniatura un pie de foto? Te lo pregunto porque hemos tenido que partir el audiovisual en cuatro partes para subirlo a You Tube y nos gustaría poner al pie, primera parte, segunda parte... Gracias.

Responder
JMiur  

Poder se puede, simplemente, coloca alguna etiqueta como SPAN o P debajo de cada enlace y allí pones el texto. Obviamente, deberían colocarse propiedades para ajustarlos.

Responder
Amador López Criado  

¡Hecho! Gracias. Fue lo primero que se me ocurrió, pero no me atreví a hacerlo porque pensaba que podía ser una chapuza. Aunque, como bien dices un poquito más arriba, todo lo que funciona es técnicamente correcto a veces conviene conocer el camino más corto o más correcto. ;)

Responder
JMiur  

Es una solución más que aceptable, no le veo nada de malo y si funciona, es perfecta :D

Responder
Bilosony2™  

Hola Jmiur!! Tengo un pequeño problema...
Este truco lo vengo usando ya hace un tiempo pero he notado que cuando uno apretieta una etiqueta donde hay varios post con este truco solo se muestran 3 por que sera?? Hay alguna solucion???
Te dejo el link de para que veas de que hablo...

http://www.pintagraff.com/search/label/Videos%20de%20Graffitis

Saludos!!!!

Responder
JMiur  

Eso ya te lo he contestado en un mail reciente. Los IDs son exclusivos así que si hay varios con el mismo ID en la misma página, sólo funcioanará uno de ellos.

Responder
atajar  

todo me sale bien pero en internet explorer no se ve porque??????:(

Responder
JMiur  

TEndría que ver un ejemplo.

Responder
atajar  

aqui puse una muestra maestro http://atajaronline.blogspot.com/2010/08/swfobject.html

Responder
JMiur  

Lo que dice IE es que la función no existe. Revisa que esté copiada correctamente sin saltos de línea indeseados que cortem las instrucciones.

Responder
atajar  

siiii era eso el salto de linea GRACIASSSS :D abrazos!!!!

Responder
OzCar  

Podría hacer lo mismo con videos de Megavideo???

Responder
JMiur  

Este es un API exclusivo para YouTube.

Responder
OzCar  

Pero como sería para videos de megavideo u otra web donde se alojan videos, teesto pregunto porque Youtube no es un portal para nada confiable para eliminando los videos que uno sube en él, a menos que solo subas videos caseros.
Es por eso que casi nadie utiliza los reproductores con lista de reproducción de youtube.
espero tu respuesta.

Responder
Biblia  

Es posible que la galeria de imagenes miniatura este contenida en un carrusel, para que cuando sean varios videos, por ejemplo, un top 10, uno se pueda desplazar por ella?

Responder
JMiur  

No tengo la menor idea :D

Responder
TV ISLAMUJERES  

Hola amigo, esta padre, pero me preguntaba si puede aplicarse a videos cargados desde VIMEO, yo tengo muchos en vimeo???? gracias por responder

Responder
JMiur  

Este API es de YouTube; desconozco si Vimeo tiene una.

Responder
Néstor Guío  

Una consulta JMiur, esta interesante el codigo y muy funcional, pero yo estoy usando el slide de cycle (http://jquery.malsup.com/cycle/) y quiero poner vídeos envés de imágenes pero cuando se reproduzca el video se pare el slide, espero tu respuesta y gracias de antemano, saludos y éxitos.

Responder
JMiur  

No sabría decirte ya que no sé cómo funciona el slider ese. Si tiene alguna función que lo detenga, basatría agregar un llamado a esa función en el botón PLAY del reproductor de videos pero, sólo estoy especulando en el aire.

Responder
del batitú  

Hola Jmiur, disculpa por hacerte volver tan atrás, tengo una consulta: es posible incrustar estos videos pero verlos con el reproductor tubeplayer que acabo de ver en tu post vagabundia.blogspot.com/2010/11/tubeplayer-nueva-version-del.html, ? quizás ya tenés un post con la explicaión?
Chas Grá Jmiur
saludos

Responder
JMiur  

No creo que sea posible ya que el reproductor es parte del API del musmo YouTube.

Responder
The Media Download  

una pregunta, y digamos que quiero colocar en vez de las miniaturas un texto, pero que salga de un menu despegable. es posible?

gracias de antemano y disculpa si te molesto :(

Responder
JMiur  

Sopongo que si pero para eso, debes crear el script correspondiente.

Responder
Pastor Gabriel Martinez  

Dios te bendice, por favor me puedes dar detalles de como o por que reemplazo esto, id="contenedorYT", si me lo puedes explicar de forma detallada te lo agradezco.

Responder
JMiur  

No entiendo la pregunta ¿Para qué quieres reemplazarlo o por qué quieres reemplazarlo?

id="contenedorYT" es sólo la forma de identificar un DIV que es donde se mostrará el reproductor.

Responder
Pastor Gabriel Martinez  

Por favor echa una mira-dita a mi blog, al final del mismo donde lo aloje y se queda cargando y sin imágenes, que hacer por favor. http://gabygabilan.blogspot.com

Responder
Pastor Gabriel Martinez  

reproductorYT o contenedor es un código especifico, por favor orientarme de la manera mas sencilla que puedas.

Responder
JMiur  

Lo que se ve en el sitio son varias cosas.
Primero, que estás cargando la librería SWFobject dos veces.
Segundo, un error en el script del traductor que n osé si influye ono influye.
Por último, errores en el código de este resprodcuatoe; por ejemplo, los enlaces dicen cosas así:
http://img.youtube.com/vi/hMXyfZTOiag /default.jpg
tienen un espacio extra; deberían ser así:
http://img.youtube.com/vi/hMXyfZTOiag/default.jpg

Lo que muestra el código fuente es que los enlaces dicen cosas asi:
<a onclick="ytplayer_loadvideo( 'hMXyfZTOiag ' );" href="#ytplayer">
donde hay un espacio extra en el ID pero además, el código indicado en la entrada dice que deben ser así:
<a href="javascript:cargarVideo('ID_VIDEO_1');">
o, en ese caso específico, así:
<a href="javascript:cargarVideo('hMXyfZTOiag');">

Responder
Pastor Gabriel Martinez  

Hermano muchísimas gracias por su ayuda que el Señor prospere su alma y que el Señor siga ampliando sus conocimiento, gracias mil hermano.

Responder
Pastor Gabriel Martinez  

Perdón de nuevo, como reducir el tamaño de las miniaturas y agregar mas en una sola fila, pero que solo se vean siete aunque hayan diez.

Responder
JMiur  

Cuántas imágenes se muestran o cuántas son las que se quieren poner en una línea, depende del espacio disponible y del tamaño de esas imágenes; puede ser cualquiera; en nada afecta al script en si mismo.

Responder
jjop215  

Excelente, me funciono muy bien...
lo aplique donde trabajo y les gusto...
http://ferreteriasanjose.byethost6.com/index-cm.html
:D

Responder
Anónimo  

Hola JMuir estuve probando este metodo para insertar los videos y me gusto mucho ... solo tengo uso mas twitvid que youtube. ¿Es posible hacer algo similar usando twitvid?
Donde la url es de esta manera http://www.twitvid.com/embed.php?guid=IDVIDEO&autoplay=1

y la miniatura de esta manera http://llphotos.twitvid.com/twitvidthumbnails/I/D/V/IDVIDEO_med.jpg donde las 3 letras antes del id corresponden a las 3 primeras del mismo I/D/V = IDVideo

Responder
JMiur  

Se puede pero debe hacerse de otra manera competamente distinta ya que no hay un API que sirva para eso. Habría que crear un script distinto.

Responder
Anónimo  

Hola denuevo XD ... estuve revisando los script que tenias y termine usando este para poner el video y cambiar la url del mismo.
http://vagabundia.blogspot.com/2010/11/seguimos-cambiando-propiedades-con.html

Responder
Misha  

Hola, quería saber como puedo hacer las miniaturas más pequeñas.
Gracias

Responder
JMiur  

Establece el valro del ancho con CSS:
.videominiaturas img { width: valorpx; }

o colócalo en la etiqueta IMG:
<img style="width: valorpx;" src="http://img.youtube.com/vi/ID_VIDEO_1/1.jpg" />

o bien:
<img width="valor" src="http://img.youtube.com/vi/ID_VIDEO_1/1.jpg" />

Responder
Misha  

Siiii ya pude, muchas gracias. :D
Ahora tengo otro inconveniente te mande un mensaje por interno te agradecería lo contestaras. =)

Responder
Unknown  

Varias consultas:

1 ¿Cuál es el tamaño del video principal?
2 Me gustaría que los thumnails de los videos quedara como en el ejemplo, ¿cuál es el css que has utilizado?

Gracias de antemano

Responder
JMiur  

En este caso, el video mide 425x344; el tamaño puede ser el que uno disponga.

Las mininiaturas n otienen nada en particular, son enlaces colcoados en un DIV cuya clase es videominiaturas y tiene esta regla de estilo:

.videominiaturas img {
border: 1px solid #555;
border-radius: 5px;
height: 55px;
margin: 0 2px;
opacity: 0.7;
padding: 5px;
width: 70px;
}
.videominiaturas img:hover {
opacity: 1;
}

Responder
Unknown  

Quisiera meter las miniaturas en este carrusel:
http://zendold.lojcomm.com.br/icarousel/example3.asp

¿Es posible? ¿Cómo se hace?

Responder
JMiur  

Si sólo son imagenes, abstaría cambair al URL de las direcciones de esas imágenes pero no puedo decirte mucho más, habría que verlo y probar.

Responder
Vitamins Protein  

Buenisimo queda perfecto, gracias. www.vitaminsprotein.es

Responder
fuserp  

Hola, una pregunta se podrá poner alguno titulo por ejemplo el titulo del video sobreponiendo en cada imagen miniatura de los videos? gracias!

Responder
JMiur  

Si. Para eso debes modificar el HTML agregando esos textos y establecer las reglas de estilo para que se superpongan de alguna manera. Hay muchas formas de conseguirlo, una de ellas.

Responder
Manuel Alberto  

Buen día JMiur.
Hoy el sistema por algún motivo no funciona.
Alguna variación en YT provoca esto?
Saludos, :)

JMiur  

Ahora no sabría decirte, tendría que revisar todo otra vez.

Responder
Manuel Alberto  

Para ser más preciso, el problema lo tengo con FF 10.0.2.
En IE 9, el sistema funciona correctamente.

Responder
Manuel Alberto  

En Chrome, la carga de videos funciona normalmente.
Puede ser, creo, un problema de la última actualización del navegador FF.
Antes de hacerla, no había problemas con el sistema.
Habrá que esperar la siguiente actualización... :)

Responder
Manuel Alberto  

Encontré el causante del problema.
Es la extensión HTTPS Everywhere.
La deshabilité y todo volvió a la normalidad en FF, mi navegador preferido.
Y para no perder el vicio (que recién se mostraba en pañales), instalé la extensión en Chrome.
Saludos JMiur, :)

JMiur  

Buena info, genial.

No hace falta que la deshabilites, siguiendo tu idea, lo que hice fue deshabiltarla en los dominios de Google; si estás en este mismo post y abres Herramientas, en las opción de HTTPS Everywhere hay una lista de los dominios que puede interceptar la extensión y basta marcarlos para que se ven con una cruz roja lo cual indica que la redirección no se aplicará en ellos.

De este modo, el vicio continua intacto y el script sigue funcionando aunque ya casi no quedan videos visibles porque YouTube los ha eliminado :-D

Gracias por la información, me evitó tener que investigar el motivo del error.

Responder
Manuel Alberto  

Todo bien JMiur.
Deshabilitando lo que señalaste, la carga de videos funciona correctamente.
Saludos, :)

JMiur  

y todo ha vuelto a la normalidad

Responder
kwon sang woo  

hola queetal:)
todo salio bien el problema es cuando boy bajando o subiendo en la pagina se distorciona :(
esta es la entrada donde lo coloque :S


http://pdulceamor.blogspot.com/2001/06/kis-my-ft2.html

JMiur  

No veo que ocurra nada raro, Mariela.

Responder
kwon sang woo  

._. cuando voy bajando en mi blog veo que el video baja conmigo por
partes o me pasara a mi nomas :S

JMiur  

No veo que ocurra eso ¿Qué navegador estás usando?

Manuel Alberto  

Yo veo un --> en el ángulo superior izquierdo del blog. Quizás eso sea la causa del problema, :)

Manuel Alberto  

Repito el mensaje por creo que hubo un fallo en el envío anterior.

Yo veo un --> en el ángulo superior izquierdo del blog. Quizás eso sea la causa del problema, :)

JMiur  

Buena vista, Manfenix :D

No parecería ser eso pero, nunca se puede asegurar nada. De todos modos, convendría corregir ese error que se deba a una serie de etiquetas agregadas dentro del estilo; en esa parte, ya sea entre <b:skin> </b:skin> o entre <style> </style> no pueden usarse comentarios con el mismo sistema que se hace en el HTML; cosas como:

<!-- NAVIDAD CON EFECTO HOVER -->
o
..----------------------------------------------------------------------->

deben ser modificadas; los comentarios deben hacerse usando /* y */

/* NAVIDAD CON EFECTO HOVER */

Responder
Unknown  

chabfle gracias lo corregire otra dudita :)
youtube bloqueo mi cuenta :(

hice una nueva hay una forma que youtube no elimine mis videos
por derechos de autor :(

JMiur  

No poniendo videos que violes los derechos de autor que Google te reclama; no hay otra forma.

Responder
Unknown  

no encuentro --> :(

JMiur  

Busca esas líneas que te indiqué. Allí están.

Responder
Unknown  

borre y
..----------------------------------------------------------------------->
sigue
ApAreciendo esA flechitA en mi blog :S

JMiur  

Hay más como ese donde hay algo rspecto a navidad.

Debes buscar todos los que haya dentro de etiquetas style o en b:skin

Responder
katoogun  

hola que tal my buenas tardes soy nuevo en esto de las web y e andado buscando esto hace mucho y me gusto la explicacion solo que tengo un problema no se si me podrias ayudar por favor resulta que hice todo lo ue comentas y si queda sale el video principal y los demas videos en miniaturas solo que al querer reproducir los videos de las miniaturas no se puede no pasa nada le doy click y nada como puedo hacerle para ue se reproduscan me podrias ayudar por favor

Responder
katoogun  

hola que tal ya logro hacer que se reproduscan los videos pero no se como hacerle para que queden en orden ya que queden separados los de abajo mira te dejo mi web q estoy haciendo para ue veas como quedan my separados los videos de abajo no quedan como el tullo de pequeñitos y ordenados http://preview.radar-latino.webnode.es/fotogaleria/musica/ saludos

JMiur  

No sé cuál es el sitio donde lo has probado ya que el enlce que coolcas debe ser algún enlace interno que sólo es accesible privadamente.

Responder
PuntaUy  

Hola Jmiur, como hago para que las miniaturas me queden horizontales, me han quedado verticales debajo del contenedor. Gracias

JMiur  

Debería ver tu ejemplo para responder eso.

PuntaUy  

Ok, puedes verlo en http://pro-punta.blogspot.com/p/videos-varios.html
Gracias

JMiur  

Eso ocurre porque en la entrada, estás escribiendo los enlaces en distintas líneas y en Blogger, eso genera etiquetas <br/> que son saltos de línea.

O escribes los enlaces sin esos saltos, todos en una sola línea o agregas una regla de estilo como esta:

.videominiaturasbr {display:none;}

PuntaUy  

Gracias JMiur, solucionado.. ademas los numere y se ven bien, nuevas gracias

JMiur  

Perfecto, Héctor.

Responder
Fa  

Hola JMiur: es lo que buscaba, muchas gracias, pero tengo un problema, no cambia a la hora de clickear en el segundo y tercer video, lo he hecho dos veces y no sale :OC ayudame por fa!! Muchas gracias!!

JMiur  

No sé dónde está tu ejemplo.

Responder
Angel  

Hola, muchas gracias :D me sirvio mucho para mi pagina web

solo tengo una duda, hay una forma de que las miniaturas aparescan mas pequeñas? como las del ejemplo que pusistes, en mi pagina aparecen mas grandes

JMiur  

Utiliza CSS para establecer el ancho y alto que quieras mostrarlas.

Angel  

gracias :D, solo que tngo otro problema las miniaturas muestran unas franjas negras arriba y abajo, se pueden quitar?

JMiur  

Tendría que ver tu ejemplo.

Carolina  
Este comentario ha sido eliminado por el autor.
Carolina  
Este comentario ha sido eliminado por el autor.
JMiur  

Tendría que ver tu ejemplo para intentar responder.

Responder
pablof  

Buenas, está muy bien la galería. No puedo termionar de ponerla bien, no se ve la caja del vídeo en una entrada de blogger. He probado con la línea del script en el codigo html y en la entrada pero la caja para reproducir los videos no se me ve, las miniaturas sin problema.

Saludos ¡

JMiur  

Tendrías que mostrar dónde lo has colocado para verlo online.

Responder
aguante huracan  

hay forma de eliminar los videos relacionados?

JMiur  

En principio lo elimina el parámetro rel=0 de la url pero, como YouTube hace tantos cambios, no puedo asegurarlo.

Responder
Unknown  

lo probé y me resulto genial !!!
pero ahora lo miro en firefox y en explorer y no funciona !!!

me ayudas?

http://retorno.com.uy/web2/videos1.html

JMiur  

No veo problema alguno en esos navegadores aún cuando hay videos que no existen.

Responder
cuantunrex  

Hola Amigo Como Estas... Me Gustaria Saber Como Puedo Aser Tabs Pero PAra Jalar Videos De Diferentes Servidores...!!! Que No solo Sea De youtube.

JMiur  

Con swfobjets no sé si es posible; tendrás que consultar con lso distintos servicios.

Con JavaScript es simple, debe crearse el código para cada uno de ellos.

Responder
Unknown  

Hola... en el caso de que quisiera poner 20 o 30 videos, como se podría añadir un scroll horizontal en las miniaturas de los videos?

Muchisimas gracias

Responder
akiralilith  

Hola, muchas gracias por compartir tu conocimiento con todos. Muy bueno el post, me sirvió de mucho.

Responder
Unknown  

Hola!!!
todo esta muy bien en cuestión a las miniatura; pero la principal no se logra ver porq me faltan estos 2 elementos; me los podrás explicar detalladamente cuales son? Gracias
Saludos!!!

Responder

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

 
CERRAR