Cargar los videos de YouTube sólo cuando el usuario quiera verlos

1 de abril de 2014 177 comentarios ,
Video de YouTube

¿Sabías que insertar un video de YouTube hace que tu blog pese por lo menos 400 kB más? Esto es porque el iframe de YouTube tiene que descargar imágenes, scripts, estilos CSS, y hacer múltiples peticiones para que el reproductor y el video se muestren correctamente, aun cuando el usuario ni siquiera esté interesado en ver dicho video.
Ahora imagínate un usuario con Internet Explorer visitando un blog de videos: una combinación fatal.

Google+ sabía esto, y también sabía que en su red social habría mucha inserción de videos que podrían perjudicar la velocidad de carga de su página, pero lo resolvieron de una manera muy sencilla. La solución: que el iframe del video sólo se cargue cuando el usuario dé click en él. De esa forma evitamos que el video se cargue innecesariamente y consuma recursos que no requiere.

El sistema es muy simple en realidad, lo que hace el script que veremos a continuación es mostrar sólo la miniatura del video, y al darle click a la imagen ésta desaparecerá y entonces se cargará el iframe que contiene el video. Puedes verlo con el elemento que está a continuación, es una imagen que al darle click cargará el video.




Para implementar este sistema de carga de video en tu blog, entra en Plantilla | Edición de HTML y antes de </body> pega lo siguiente:
<script>
//<![CDATA[
// YouTube iFrames
var i,c,y,v,s,n;v=document.getElementsByClassName("youtube");if(v.length>0){s=document.createElement("style");s.type="text/css";s.innerHTML='.youtube{background-color:#000;max-width:100%;overflow:hidden;position:relative;cursor:hand;cursor:pointer}.youtube .ythumb{bottom:0;display:block;left:0;margin:auto;padding:0;max-width:100%;position:absolute;right:0;top:0;width:100%;height:auto}.youtube .play{filter:alpha(opacity=80);opacity:.8;left:50%;margin-left:-38px;margin-top:-38px;position:absolute;top:50%;width:77px;height:77px;background:url(//lh6.googleusercontent.com/-KM0uGaLlhKc/UznnNWfT-wI/AAAAAAAAKS0/Nnz3WwdoLxk/s77/play.png) no-repeat}';document.body.appendChild(s)}for(n=0;n<v.length;n++){y=v[n];i=document.createElement("img");i.setAttribute("src","http://i.ytimg.com/vi/"+y.id+"/hqdefault.jpg");i.setAttribute("class","ythumb");c=document.createElement("div");c.setAttribute("class","play");y.appendChild(i);y.appendChild(c);y.onclick=function(){var a=document.createElement("iframe");a.setAttribute("src","https://www.youtube.com/embed/"+this.id+"?autoplay=1&autohide=1&border=0&wmode=opaque&enablejsapi=1");a.style.width=this.style.width;a.style.height=this.style.height;a.style.margin=this.style.margin;a.style.border=this.style.border;a.style.display=this.style.display;this.parentNode.replaceChild(a,this)}};
//]]>
</script>
Y ahora, cada vez que quieras insertar un video en tu blog, ya sea en una entrada, o en un gadget, usa este código:
<div class="youtube" id="XXXXXXXX" style="width:560px; height:315px; margin:0 auto; display:block; border:none"></div>

Lo que está en negrita es el ancho y alto del video, lo puedes modificar al tamaño que quieras.
Lo que está en color rojo es donde deberás poner el ID del video.

¿Cuál es el ID del video?
Cuando abres un video de YouTube verás en la barra de direcciones una URL, los últimos caracteres son el ID del video.

https://www.youtube.com/watch?v=GfxAEl15pDs

Dentro del primer código verás una URL en color verde, esa es la imagen de play, la puedes cambiar por otra si lo deseas, procurando que la imagen mida 77x77 pixeles.


Como puedes ver, es un sistema práctico y funcional para optimizar la velocidad de carga del blog, algo que tanto los robots de los buscadores y tus lectores agradecerán, pues los videos no se cargarán a menos que el usuario quiera verlos.

Vía | Labnol




177 comentarios en:

" Cargar los videos de YouTube sólo cuando el usuario quiera verlos "

  1. esto vale para vimeo y dailymoticion?

    ResponderEliminar
    Respuestas
    1. Los tres en conjunto no lo sé, pero si sólo publicas videos de Vimeo, se puede modificar, lo mismo que si quieres usarlo sólo para Dailymotion. Éste, tal como está sólo es para YouTube, que es el que más demanda tiene.

      Eliminar
  2. wow realmente útil para mi blog!! saludos potro!!

    ResponderEliminar
  3. ¿Se puede combinar con Shadowbox o poniendo el video en shadowbox pasa lo mismo (El iframe carga hasta que se hace clic en el enlace)?

    Saludos!

    ResponderEliminar
    Respuestas
    1. Ese es el problema Sergio, que Shadowbox se activa al pinchar en el enlace, y aquí el video se muestra después de otra función :(

      Eliminar
    2. Oh ya entiendo, así que aún cuando el video se pone en shadowbox el iframe descarga todo lo que necesita ¿No es así? Esto pasa también cuando las entradas han sido resumidas y el video no carga en la página principal ¿Verdad?

      Eliminar
    3. Mas bien, si el Shadowbox se insertara dentro del iframe no abría problema, se modificaría el código para añadirle el atributo rel="shadowbox" dentro del iframe, pero, ese atributo no se agrega dentro del iframe sino dentro del enlace que abre el video, y en este caso no hay enlace que abra el video :(

      Eliminar
    4. Ya entiendo, entonces lo que hay que hacer es elegir entre el Shadowbox o éste código. Me gusta el shadowbox y por ahora casi no subo videos a mi blog, cuando lo haga entonces creo que me convendría más utilizar este método.

      Eliminar
  4. Potro, cordial saludo, unas inquietudes, desde que vengo utilizando Blogger y he insertado vídeos de Youtube, siempre salen las miniaturas y hay que darles click para poderlos ver, de pronto sea porque tengo mi canal. Ya me dirás. Mis inquietudes son: Si aplico los scrips en mis blogs, esto hará que el blog cargue más rápido?, y otra es: ¿Cómo hago para tener el control del tamaño del vídeo, dado el caso que no haga uso de tus scrips, porque en mis páginas me gustaría tener la opción de cuando cargue el vídeo, se active y ajustar el tamaño a mi gusto.
    Gracias por tus respuestas.

    ResponderEliminar
    Respuestas
    1. Hola Iván, todos los videos de YouTube que insertamos muestran la miniatura, la ventaja de este sistema es que no carga el video cuando se carga la página, sino que carga el video sólo cuando el usuario le da click para verlo, eso sí ayuda a mejorar la velocidad de carga del blog, tampoco te creas que es tanto, pero sí un poco.
      Por el tamaño no te preocupes, ahí en la entrada menciono dónde se modifica para que tú elijas qué tamaño quieres que tenga el video.
      Saludos.

      Eliminar
  5. muchas gracias, esta muy bien saberlo.

    ResponderEliminar
  6. Mi blog se demoraba mucho en cargar, por eso no subía vídeos, lo harían más lento, ahora ya sé como superar ese inconveniente :D

    Gracias como siempre Potro!

    ResponderEliminar
  7. ¡Gracias! me viene genial, lo pondré en práctica seguro : )

    ResponderEliminar
  8. Hola Potro :)
    Un post genial, sólo tengo una duda. ¿La imagen del 'play' es la imagen que sale en el fondo en todo el reproductor, o solo la de la fecha del botón?
    ¡Gracias!

    ResponderEliminar
    Respuestas
    1. Hola Paula, la imagen de Play es la que aparece sobre la imagen en "miniatura", una vez que cargue el video desaparecerá, la siguiente que veas es la del propio reproductor de YouTube, esa no se puede cambiar.
      Saludos.

      Eliminar
  9. Hola potro - esto es solo para videos de youtube?

    ResponderEliminar
    Respuestas
    1. Sí, se puede usar para algún otro, pero no combinado.

      Eliminar
  10. Respuestas
    1. jajajaja, buena Potro, parece que te equivocaste al escribir el "www", ya que tu URL no la lleva xD!

      Eliminar
  11. Gracias Potro, esto ayudará con la carga de mi blog.

    Saludos.

    ResponderEliminar
  12. Potro hermano me da pena colocar algo diferente, pero necesito urgente su ayuda para correjir algo importante en una plantilla, es algo que se que no le quitara 10 segundos, como seria para conactarlo o para escribe, graciasn n abrazo.

    ResponderEliminar
    Respuestas
    1. Hola Antonio, puedes dejar la pregunta aquí, o por la página de Facebook.
      Abrazos.

      Eliminar
  13. Saludos Potro.... acabo de implementar este post en mi blog, me parece muy adecuado, mi blog tiene muchas cosas que provocan que cargue lento pero así me gusta y no deseo quitarle nada, esto viene a darle un poco de respiro al blog por lo que te agradezco infinitamente el aporte, no deseo que lo tomes como publicidad para mi blog, de hecho se que eres una persona de gran calidad y calidez humana y no lo harías (demonios cuanto rollo) pero como te lo prometí hice un post en honor a tu Ciudad Blogger en mi Taberna.... Gracias de nuevo, un abrazo fraternal !!!

    ResponderEliminar
    Respuestas
    1. Pero qué sorpresa kissOB1, muchas gracias por esos detalles :')

      Eliminar
    2. De nada amigo, a decir verdad todos deberíamos colocar un enlace a esta pagina en nuestros blogs, jejejejejeeje y pues como también le coloqué el menú deslizante ---> http://ciudadblogger.com/2012/03/menu-deslizante-abajo-del-blog.html ... Predicando como buen Cura, con el ejemplo. Ahí quedará el enlace a esta maravillosa pagina por los siglos de los siglos... Amén!!!! ....... jejejeejejejeje

      Eliminar
  14. Muy Interesante Potro. El tiempo de carga es uno de los problemas mas comunes para los que utilizamos videos de youtube a menudo.
    Por cierto he viso que el Wordpress hay un plugin que se llama Social Bloker, o Video Bloquer. Que lo que haces es bloquear el contenido ya sea la Imagen o el Video, sustituyentola por los Botones Sociales. Lo que obliga al visitante a Compartir el contenido primero, antes de poder verlo. Aunque puede resultar un poco molesto, es una buena manera de ayudar a viralizar tu contenido.
    Si pudieras conseguir un Script te lo agradeceremos muchos de tus visitantes!

    ResponderEliminar
    Respuestas
    1. Tienes razón Adolfo, esos scripts cómo son molestos, pero lo cierto es que mucha gente lo pide. Me he topado con uno que otro plugin que hace eso pero todos son de pago, y ya sabes que con las cuestiones de copyright es mejor no meterse.
      Saludos.

      Eliminar
    2. Entiendo. Aun asi seria interesante algun post o referencia. En los tiempos que estamos yo lo considero vital sobre todo para los bloggers que empiezan y no estan bien posicionados en google, viralizar el contenido seria una buena alternativa hasta cojer mas ranking en google.

      Eliminar
  15. Muy bueno Potro me encanto, pero sabes que adore mas?, la intro de ciudad Blogger, esta genial, esta buenisima-

    Ah!! muy pronto te pedire ese favor pendiente ^^
    Besys y Moltos Saluttes!! .

    ResponderEliminar
    Respuestas
    1. Gracias Alison. Ya es viejita la intro, tengo que actualizarla porque el nuevo logo ya no tiene los edificios que salen en el video :)
      ¡Besos!

      Eliminar
  16. Hola Potro, muchas gracias por todas las cosas que posteas.
    Tengo una duda: ¿Se puede "indicar" de alguna forma a blogger para que agarre la imagen que aparece en lugar del video como miniatura del post? Es decir, se pueda acceder a esta imagen desde el "head" con "data:blog.postImageThumbnailUrl" para usarla como miniatura del post cuando lo compartamos por ejemplo en Facebook.
    He visto que al implementar esto de los videos en el blog se añade una propiedad "image_src" de forma automatica en el "head" con la url de la imagen del video pero blogger no la muestra como miniatura del post porque espera encontrarsela dentro de la entrada en un elemento del tipo <img src:...> y no en un <div> como el que contiene la imagen del video. Muchas gracias por adelantado.

    ResponderEliminar
    Respuestas
    1. No que yo sepa FranJGN, aunque, me parece que cuando usas un sumario automatizado (utilizando el sistema nativo de Blogger) y si tu primer elemento es un video entonces creo que sí toma esa miniatura como imagen del post. Ahora, que honestamente nunca me he fijado si los demás sitios como Facebook también tomen ese dato para su miniatura, será cuestión de probar. Aquí hay unos sumarios como los que te digo:
      http://www.oloblogger.com/2013/03/sumarios-rapidos-blogger-resumenes.html

      Eliminar
  17. 1.- Potro Puedo Usar El Codigo Que Me Da Youtube? cuadno el doy compartir > Insertar? o tengo que usar el que das tu ?
    2.- No Sabes Ningun Codigo que pueda usar en una pagina para que de la Fecha ? y que se actualize sola? Algo Sencillo?
    3.- No Sabes Si Se Puede Usar La Fanbox De Twitter y Poner una De Youtube?
    sii Gracias Disculpa Que me Aproveche Y tire Muchas Preguntas :P

    ResponderEliminar
    Respuestas
    1. Hola, hay que usar este código, de YouTube sólo necesitarás su ID.
      Hay una entrada sobre un código que muestra la fecha en el blog:
      http://ciudadblogger.com/2010/04/fecha-diaria-en-el-blog.html

      YouTube no tiene fanbox, mientras YouTube no facilite el acceso a los datos de los suscriptores no se puede hacer nada parecido.
      Saludos.

      Eliminar
  18. Hola Potro esta plantilla http://www.templatetrackers.com/2014/03/braxton-fashion-blogger-template.html tiene un gran problema, que los post (entradas) que tienen videos de YouTube, no saca la imagen en la página principal, si no que montan el video y oculta la imagen 600x400 del post, en cambio cuando está dentro post todo sale bien, (Imagen + Texto + Video). ¿Cómo se soluciona esto?

    ResponderEliminar
    Respuestas
    1. Potro esto repondio la empresa: Hermano le pregunta al creador de la plantilla y me repondio esto: (Es debido a la secuencia de comandos de resumen. El código de script se establece en buscar el video primero y luego después de que obtendrá la imagen. Así que si se añade la imagen y de vídeo tanto a continuación se mostrará el vídeo en lugar de imágenes en la página de inicio) ¿Como se soluciona esta parte? Para que cargue primero la imagen principal.

      Eliminar
    2. Yo no he visto en esa plantilla un script que se encargue de mostrar las imágenes, el resumen sólo afecta al texto, de ser así no queda de otra que primero pongas una imagen y después el video.

      Eliminar
    3. Hola es que primero yo coloco la imagen asi tal cual como esta la demo y abajo el video pero los post que llevan video esconde la imagen en la pantalla principal y solo deja el video ya dentro del post todo sale bien imagen texto y video y esa fue.la respuesta que me dieron los de la plantillla como soluciono eso

      Eliminar
    4. Esto dijo la empresa Es debido a la secuencia de comandos de resumen. El código de script se establece en buscar el video primero y luego después de que obtendrá la imagen. Así que si se añade la imagen y de vídeo tanto a continuación se mostrará el vídeo en lugar de imágenes en la página de inicio

      Eliminar
    5. Hola Potro ya fue solucionado, muchas gracias hermano.

      Eliminar
    6. Habrá que pedirle entonces al autor de la plantilla que le haga una modificación al script. Yo intenté revisarlo pero todos los scripts de la plantilla están comprimidos en base62 así que me han sido ilegibles.

      Eliminar
  19. wuajajsajaJWJAWJaaujsajasua xDDDDDDDD jajajaja en serio Potro que me mataste con lo de: Ahora imagínate un usuario con Internet Explorer visitando un blog de videos: una combinación fatal. jajajajajaa

    en serio me alegraste el día xD jajaja

    ResponderEliminar
    Respuestas
    1. Jajaja, pobre usuario, ¿te imaginas? :/

      Eliminar
  20. Para centrar el vídeo, no me deja centrarlo en la entrada, que código debo añadir

    ResponderEliminar
    Respuestas
    1. En el DIV donde pones el ID del video, justo antes de border:none agrega esto:
      margin:0 auto;

      Con eso se centrará.
      Ahora mismo añado ese estilo dentro del código de ejemplo para que todos lo tengan por defecto.

      Eliminar
    2. perfecto, muchísimas gracias

      Eliminar
    3. ...Ahora se coloca en el centro, pero al darle al play, al empezar a reproducir, el reproductor, vuelve al lateral (o no se si solo me pasa a mi), al reproducirse, no se queda fijo en el centro

      Eliminar
    4. Yo estoy utilizando esto para centrar el video:
      <center>
      <div class="youtube" id="r-w2OXZ3ruQ" style="width:640px; height:360px; border:none"></div>
      </center>

      Eliminar
    5. Hola de nuevo. Copia otra vez el script, y el código del DIV, ya he modificado ambos para solucionar ese problema, y que estén siempre centrados por defecto.
      Saludos.

      Eliminar
  21. Pongo pocos vídeos, pero está genial el truco, Potro, porque es verdad que ralentizan mucho la carga, así que lo tendré en cuenta para el próximo. ¡Infinitas gracias!. Un beso enorme.

    ResponderEliminar
    Respuestas
    1. Gracias princesa mía, ¡otro beso para ti!

      Eliminar
  22. Genial! Potro y habrá algo similar pero para Gif's animados?

    ResponderEliminar
    Respuestas
    1. Nop, la animación del GIF no se activa con clicks, viene dentro del formato de la imagen. Pero, sí puedes hacer que las imágenes no carguen sino hasta que se baja el scroll de la página:
      http://ciudadblogger.com/2012/04/agregar-lazy-load-en-blogger-para.html

      Eliminar
    2. Si, lo se, te preguntaba por que vi en la pagina de 9gag algo similar y pensé que tal vez se pueda implementar en la plantilla de blogger, pero probare implementar el Lazy load.
      Gracias Potro.

      Eliminar
    3. Ahí primero cargan una imagen JPG y luego el GIF. No sé qué tan recomendable sea eso porque la diferencia del tamaño entre la JPG y el GIF no suele ser mucha (dependiendo del GIF obviamente), así que no creo que haya un cambio notable en la velocidad de carga del blog. Lo cierto es que al menos se ve más llamativo.

      Eliminar
    4. Gracias Potro, seguiré usando tus métodos siempre tan funcionales y que bien que estés de regreso.

      Eliminar
  23. Para vídeos de VIMEO es el mismo proceso? Genial que ya estas de regreso!! muchos saludos.

    ResponderEliminar
    Respuestas
    1. Sí y no. Este script tal como está es sólo para YouTube. Se puede modificar para Vimeo, pero ya no funcionaría para YouTube.
      Saludos para ti también :)

      Eliminar
    2. Hola potro

      Como seria modificado para vimeo?

      Muchas gracias pedazo de web que tienes

      Eliminar
    3. El script quedaría así:

      <script>
      //<![CDATA[
      // YouTube iFrames
      var i,c,y,v,s,n;v=document.getElementsByClassName("youtube");if(v.length>0){s=document.createElement("style");s.type="text/css";s.innerHTML='.youtube{background-color:#000;max-width:100%;overflow:hidden;position:relative;cursor:hand;cursor:pointer}.youtube .ythumb{bottom:0;display:block;left:0;margin:auto;padding:0;max-width:100%;position:absolute;right:0;top:0;width:100%;height:auto}.youtube .play{filter:alpha(opacity=80);opacity:.8;left:50%;margin-left:-38px;margin-top:-38px;position:absolute;top:50%;width:77px;height:77px;background:url(//lh6.googleusercontent.com/-KM0uGaLlhKc/UznnNWfT-wI/AAAAAAAAKS0/Nnz3WwdoLxk/s77/play.png) no-repeat}';document.body.appendChild(s)}for(n=0;n<v.length;n++){y=v[n];i=document.createElement("img");i.setAttribute("src","http://i.vimeocdn.com/video/"+y.id+"ninguna.jpg");i.setAttribute("class","ythumb");c=document.createElement("div");c.setAttribute("class","play");y.appendChild(i);y.appendChild(c);y.onclick=function(){var a=document.createElement("iframe");a.setAttribute("src","https://player.vimeo.com/video/"+this.id+"?autoplay=1&badge=0&border=0&wmode=opaque&enablejsapi=1");a.style.width=this.style.width;a.style.height=this.style.height;a.style.margin=this.style.margin;a.style.border=this.style.border;a.style.display=this.style.display;this.parentNode.replaceChild(a,this)}};
      //]]>
      </script>

      Pero... en el caso de Vimeo no podemos obtener la miniatura tan fácil así que no mostrará ninguna :(

      Eliminar
  24. que alegria verte ya por aqui, tenia un susto grande de no verte más, bienvenido!!

    ResponderEliminar
  25. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Pues sí me tarda demasiado en abrir, pero igual tienes muchos elementos, tal vez debas eliminar gadgets que no necesitas, imágenes, scripts, etc. y dejar sólo lo realmente necesario.

      Pd. He eliminado el comentario por el aviso que está arriba del formulario.
      Saludos.

      Eliminar
  26. Disculpame si te hago esta pregunta en este artìculo, se que no es pertinente, pero no encuentro otro medio. Tengo mi blog con la cuenta de Google+ bloqueada y no logro destrabarla, non hay razon que valga con Google: he enviado mil veces copia de documentos y todo lo que han pedido los moderadores. Nada. Puedo publicar mis entradas a traves de Windows Liv Writer, es decir està bloqueado Google+ no la cuenta, los demàs servicios no tienen ningun problema: AdSense, GMail, etc. Pregunta: conoces algun medio para acceder a la plantilla para poder efectuar alguna modificacion, cambiar de lugar los banners de AdSense, etc? Gracias

    ResponderEliminar
    Respuestas
    1. Hola Fausto, ¿no puedes acceder a Blogger? ¿te aparece algún mensaje cuando intentas acceder? Entiendo que tienes enlazado tu blog con tu cuenta de Google+, pero si te bloquean la de Google+ deberías poder seguir teniendo acceso a Blogger, a no ser que haya algún tipo de violación en sus políticas de contenido.

      Eliminar
  27. Flaco Potro eres Un el semidios de Blogger, siempre leo tus articulos y me es muy util todo, este articulo me callo de al perno, queria perdirte un favor. Si no fuera tanta molestia yo lo haria pero no se de codigos y nada de eso pero esto que te pediré parese sencillo. Bien, queria una caja de facebook deslizante en la esquina derecha de abajo del blog y que se desplege cada vez que el visitante llegue el final de el articulo. Vi uno en una pagina estadounidense y me seria muy util. Te dejo la pagina donde vi la caja deslizante automatica. Es esta pagina baja hasta al ultimo http://goo.gl/ZRTuCW tal vez ya hallas escuchado de ella, en 7meses crecio exageradamente.. espero tu respuesta y ojala puedas ayudarme, un abrazo Potro.

    ResponderEliminar
    Respuestas
    1. Gracias por tu comentario Luna, apenas soy un simple mortal de Blogger, me queda mucho por aprender.
      No había escuchado de esa página, pero he visto lo que mencionas. Hay una entrada por aquí que habla sobre mostrar las entradas siguientes y antiguas al llegar al final de la página, se podría modificar para que en lugar de esos enlaces pongas el fanbox de Facebook:
      http://ciudadblogger.com/2013/02/enlaces-de-navegacion-que-aparecen-al-bajar-la-pagina-y-muestran-el-nombre-de-las-entradas.html

      En caso de que se te dificulte y no logres colocarla me avisas para que lo anote en las entradas siguientes y lo publique en una de las próximas publicaciones.

      Un abrazo.

      Eliminar
    2. Gracias potro, pero como te dije soy malo para los codigos no se donde poner el codigo del cuadro del la pagina de facebook. Lo utimo que dijiste esta bueno. ojala puedas hacer una entrada sobre esto. Estaré pendiente Potro, un abrazo y Gracias

      Eliminar
    3. Lo anotaré entonces para futuras publicaciones ;)

      Eliminar
    4. Recordé que en Oloblogger había algo similar:
      http://www.oloblogger.com/2013/07/caja-emergente-jquery-scroll-compartir.html

      Ese te resultará sencillo, sólo tienes que reemplazar el código de los botones por el del fanbox ;)

      Eliminar
    5. Como siempre respondiendo a los comentarios y sirviendonos Muchas Gracias potro, eres uno de los bloggeros mas atentos, sino es que el mas atento, Gracias por eso, entontre uno pero de redes sociales solo queria de fb pero encontre de 3 de Google+ - facebook y twitter, cuando bajas aparece el cuadro, pero creo que no va con mi plantilla porque a la hora que dan click en me gusta o en seguir, donde esta escrito mi articulo todas las letras se hacen para un costado bien raro no se porque pasa es no se que tiene mi plantilla, lo prove en otro y todo normal, o sea ese error solo esta en mi plantilla no se porque, Gracias Potro.

      Eliminar
    6. Si solo te sucede en ese blog entonces podría ser algún estilo de tu plantilla, te sugeriría que consultes en el blog donde has tomado ese código para que te puedan ayudar a resolver el problema.
      Saludos, y gracias por tu comentario!

      Eliminar
  28. Hola Potro!. Podrías hacer una entrada explicándo cómo crear un mapa del sitio muy parecido al tuyo para nuestros blogs? Gracias. http://www.canaltokio.com/

    ResponderEliminar
    Respuestas
    1. Hola Tesko, este es el que yo tengo:
      http://vagabundia.blogspot.com/2010/05/tabla-de-contenidos-por-categoria.html

      Eliminar
  29. No me lo creo que sorpresón!! gracias por volver MAESTRO.
    Gracias

    ResponderEliminar
    Respuestas
    1. Gracias a ti por seguir visitando este blog :)

      Eliminar
  30. Perfecto! Estaba buscando una forma para hacer una página con videos, pero siempre me preocupó la velocidad en que cargaría… Gracias Potro!!

    ResponderEliminar
  31. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Nop, eso no sirve porque el navegador de cualquier manera tiene que cargar la imagen, no importa si es de tu cuenta o de otra cuenta.
      Yo haría una cabecera con una imagen mucho más pequeña, las imágenes muy grandes siempre tardarán más en cargar.
      El slider lo condicionaría para que se muestre sólo en la portada.
      Y el chat lo pondría dentro de una página estática para que no cargue en todas las páginas del blog.

      Eliminar
    2. Ok Gracias Potro, y Como Hago Eso Del chat?

      Eliminar
    3. Sólo crea una página y dentro de la página pon el código del chat, de esa forma el chat sólo se verá en esa página.

      Eliminar
  32. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  33. Este código es el mejor paras los que constantemente ponen vídeos en su pagina, le he hecho una modificación para usarlo en cualquier servidor de vídeo, como youtube, played, allmyvideos, VK, etc., Gracias Potro con esto ahora mi pagina cargara el doble de rápido.

    ResponderEliminar
    Respuestas
    1. buenas tardes Braulio se podria saber como le hiciste a mi me serviría con el servicio de almacenamiento de google drive . saludos.

      Eliminar
  34. ¿Se podria cambiar la imagen del video por una propia?

    ("src","http://i.ytimg.com/vi/"+y.id+"/hqdefault.jpg")

    ResponderEliminar
    Respuestas
    1. Se podría si cambias esa parte, pero entonces todos los videos tendrían el mismo thumbnail.

      Eliminar
  35. potro tengo una duda con esto:

    ("src","http://i.ytimg.com/vi/"+y.id+"/hqdefault.jpg")

    Se podria centrar es imgane y que no se vieran los vorde negro, poruqe mira como queda en mi blog

    http://no-puede-ser.blogspot.com.es/2014/04/abuela-monta-en-una-montana-rusa-por.html

    ResponderEliminar
    Respuestas
    1. Hola Marcos2698, he entrado pero no he visto ningún borde en la imagen del video.

      Eliminar
  36. Me parece que no me has entendido es el bode que te marco con un cuadro naranja en la imagen:

    http://3.bp.blogspot.com/-f7jOzOzZ-48/U05YC1Vw1sI/AAAAAAAAAJk/hjcwu3wp--M/s1600/este+borde.png

    Me gustaria centrar la imgen para que no se vieran los bodes o el borde

    ResponderEliminar
    Respuestas
    1. Hola de nuevo. ¿En cuál navegador lo estás viendo? porque desde el navegador que uso (Safari), insisto, se ve bien.
      http://oi61.tinypic.com/24q1u6v.jpg

      Eliminar
    2. yo en (mozilla) pero bueno da igual. Cada navegador es diferente.

      Gracias por este truco y por contestarme gracias Potro

      Eliminar
    3. Mira si añadiendo estos estilos en tu plantilla resuelve el problema en Firefox:

      @-moz-document url-prefix() {
      .youtube .ythumb {top:-70px !important;}
      }

      Eliminar
  37. gracias potro estas en todas, esto me ayudara mucho para colocar varios videos y que no se sobre cargue la pagina y se cuelgue

    ResponderEliminar
  38. HOLA potro mucho gusto, cuando vas a compartir el post de como enumerar los comentarios como el estilo de sitio web esta genial...

    ResponderEliminar
    Respuestas
    1. Mucho gusto Nitro Sonic. Busca en Oloblogger, ahí tienen esa entrada :)

      Eliminar
  39. muy buen recurso Potro, justo estaba necesitando esto, Gracias :D

    ResponderEliminar
  40. Hola Potro buenos días, he visto la nueva herramienta que has habilitado y es muy buena, pero necesito saber si puedo subir videos con imagenes propias más no con imagen por defecto de youtube y sino se puede saber como puedo buscar la herramienta que te pido en la web.

    Yo tengo un blog deportivo y necesito imagenes mias que cuando le den play se reproduzca

    Te dejo un ejemplo de esta página que es lo que quiero>>

    http://www.futbolred.com/multimedia/video/libertadores/noticias/octavosdefinal2014/un-gol-salvador-le-dio-sherman-a-nacional-ante-mineiro/13876438

    ResponderEliminar
    Respuestas
    1. Hola Juan Pablo, con este método no creo que sea posible, ta vez con alguna variante pero ahora mismo no se me ocurre como.
      Otra opción es que si tienes un gran número de suscriptores en YouTube puedas habilitar la opción de personalizar la miniatura del video, de esa forma tú podrías elegir qué imagen se mostrará en cada uno de tus videos de YouTube.

      Eliminar
  41. Hola, no encuentro el enlace en verda para poder modificar la imagen del PLAY. Pueden ayudarme?

    ResponderEliminar
    Respuestas
    1. Disculpa Lucas, había olvidado marcar la URL en color verde, ya lo he puesto. O bien, te dejo aquí la URL que debes cambiar:

      lh6.googleusercontent.com/-KM0uGaLlhKc/UznnNWfT-wI/AAAAAAAAKS0/Nnz3WwdoLxk/s77/play.png

      Eliminar
  42. Hola amigo me gusta mucho tu blog ya he aplicado varias cosillas en el mio y el tema de esta entrada me interes mucho ya que utlizo google drive para subir mis vídeos y en mi blog los carga muy lento la manera que utilizo para insertarlos es la siguiente:

    utilizo el spoilerd de esta entrada

    http://ciudadblogger.com/2011/04/spoiler-para-ocultar-y-mostrar.html

    y coloco el código de inserción del video.

    y me funciona bien pero igual tarda un poco (no mucho ) pero cuando son varios por ejemplo unos 10 tarda bastante entonces quisiera saber si cabe la posibilidad de que pueda aplicar la info. que expones en esta entrada .

    por ejemplo esta url de un video que tengo

    https://docs.google.com/file/d/0BzzRo4SD3TCqcVpaNmt0dDg2Qm8/edit

    cual codigo seria el que tengo que ponerle ? seria este :0BzzRo4SD3TCqcVpaNmt0dDg2Qm8

    o como tendría que quedar dentro del spoiler?

    bueno amigo muchas gracias espero y puedas ayudarme saludos.

    ResponderEliminar
    Respuestas
    1. Hola luis, el spoiler no evita que se cargue el video, sólo lo oculta al usuario, así que de nada sirve para reducir la velocidad de carga del blog.
      En lo que este método concierne supongo que puedes modificar el código para en lugar de usarlo con YouTube lo uses con tus propios videos, pero mucho dependerá de cuál reproductor uses ya que el script maneja el código para IFRAMEs de Youtube lo cual no aplica para cualquier otro servicio o formato de video.

      Eliminar
    2. bueno esta bien ratare de experimentar aver que sale gracias .

      Eliminar
  43. Hey Potro!!!
    Diràs que soy medio taba pero no entiendo la segunda parte.
    En donde dice :
    Y ahora, cada vez que quieras insertar un video en tu blog, ya sea en una entrada, o en un gadget, usa este código:
    ------------------------------------------------ etc
    cómo lo introduzco.
    Estoy subiendo los videos por entrada no por gadget y por ende solo encuentro las opciones de subir video.
    No entiendo =(

    ResponderEliminar
    Respuestas
    1. Hola, recuerda que este método es para videos con YouTube, por lo tanto, en tu entrada (estando en la pestaña HTML y no en Redactar) debes poner el código que se menciona en el post, dentro de ese código debes poner el ID del video de YouTube.

      Eliminar
  44. El mejor del aula gracias potro siempre sorprediendonos con algo nuevo.

    ResponderEliminar
  45. Hola, como se hace para alinear el video a la izquierda?

    ResponderEliminar
    Respuestas
    1. Hola, quita el margin:0 auto; que está en el DIV donde se pone la ID del video, quitando ese estilo se alineará a la izquierda.

      Eliminar
    2. Muchas gracias! esto no se si lo sabrás hacer pero te lo pregunto: quiero poner un marco en el video como en el que aparecen en las imágenes automáticamente, ¿se podría hacer de algún modo?

      Eliminar
    3. Perdón, no he comprendido, ¿cuál marco de cuáles imágenes?

      Eliminar
    4. Cuando subes una imagen, te aparece un contorno alrededor, yo pregunto si ese contorno se podria poner tambien sobre la imagen que aparece del video.

      Eliminar
    5. En sí eso depende de cada plantilla, no es que Blogger inserte un borde en las imágenes, yo por ejemplo subo una imagen y aparece tal cual sin ningún borde, sombra o algo parecido.
      Si quieres ponerle una ligera sombra en el video, quita el border:none que está en el código donde pones el ID del video, y en su lugar pon esto:

      padding: 5px; background: #FFF; border: 1px solid #eee; box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);

      Eliminar
    6. Muchas gracias! no era exactamente lo que buscaba, pero te doy las gracias por haber intentado ayudarme, Saludos! PD:Tienes la mejor web de ayuda a bloggers.

      Eliminar
  46. Esto se podria implementar para insertar un mapa de google maps ??

    ResponderEliminar
  47. se podría implementar esto para un mapa de google maps?

    ResponderEliminar
    Respuestas
    1. Sí, pero no tendrá miniatura como los videos, a menos que pongas la misma para todos. Si aun así quieres hacerlo sólo cambia esta parte del código:
      https://www.youtube.com/embed/"+this.id+"?

      Por esta otra:
      https://www.google.com/maps/embed?"+this.id+"?

      Y en lugar de poner la ID del video, pondrías una serie de caracteres que viene en el código de los mapas, por ejemplo:
      pb=!1m14!1m12!1m3!1d26910.68811375456!2d-117.08568770921013!3d32.530526437143436!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1ses-419!2s!4v1402356956759

      Eliminar
  48. Gracias,Mi blog,toda entrada que tiene,va primero con una descripcion,luego el video de youtube y luego otra descripcion y no me es dificil centrar el video yá que en redactar veo la pantalla y se me es facil asi,pero al ponerlo como tú,no veia en redactar la pantalla,¿aparte del codigo que das?,¿para poner el video dos lineas mas abajo de la descripcion que pongo al principio y centrado,que tendría que poner?ya despues pongo una pequeña descripcion.

    ResponderEliminar
    Respuestas
    1. Hola El zeta-, cuando se usan este tipo de códigos casi siempre se tienen que manipular desde HTML y no desde redactar, sobre todo en este caso que el video es llamado desde un DIV.
      El video ya va a estar centrado, ya tiene los estilos para que así sea. Sólo tienes que dar ENTER tantas veces como quieras para darle un espacio tanto arriba como abajo en caso de que lo desees.

      Eliminar
  49. Hola Potro, tu blog es increible, no sabes cuanto me ayuda. Quería hacerte una consulta, tengo una web dedicada precisamente a vídeos, y este script me viene genial.

    El problema que tengo, es que la plantilla que uso, no se como, hace que cuando pongo un video, sea de youtube o daylimotion, me lo ajusta automaticamente a todo el ancho de la entrada, pero al aplicarles este script, esto ya no sucede.

    Vaya lo que me gustaría es que siguiera ajustandose automaticamente el tamaño del video al ancho de la entrada.

    Y por último, no se si será mucho pedir, ¿pero una modificación para Dailimotion no podrías publicar? :P

    Muchas gracias!

    ResponderEliminar
    Respuestas
    1. Gracias por tu comentario Isaki. Por ahora no sé si lo adapte a otra plataforma debido al tiempo que dispongo.
      En cuanto a lo otro, prueba cambiando el width y height que está dentro del DIV donde se pone la ID del video, por esto:

      width:100%; height:100%;

      Si la altura del video no queda bien entonces cambia ese height por otro valor en pixeles, por ejemplo 300px
      Saludos.

      Eliminar
    2. Ok, funciona perfecto, ¡muchas gracias!.

      Eliminar
  50. Gracias me sirve mucho para mi blog que muestra videos en un apartado

    ResponderEliminar
  51. Viene genial para mi blog de videos así carga mas rápido todo, mi única consulta es que al compartir en Facebook o Google Plus no muestra la imagen que genera, tampoco se generan las miniaturas en el widget de entradas populares.

    Hay alguna forma de editar el código para esto?

    Como siempre, muchas gracias

    ResponderEliminar
    Respuestas
    1. No que yo sepa Esteban, me temo que para esos casos habrá que agregar una imagen al post para que esa sea la que tomen las redes sociales.

      Eliminar
  52. Hola de nuevo Potro, estoy probando una plantilla para otro proyecto, y he importado entradas de otro blog para probar. Resulta que no me aparecen los vídeos, ni los iframes en general. Me gustaría que me dijeses si es defectuosa la plantilla, o si me va a dar problemas, y si no, y es fácil de modificar, me ayudes a hacerlo (como siempre) ;)

    La plantilla es esta:
    http://btemplates.com/2011/blogger-template-chalk-board/

    Muchísimas gracias!!!

    ResponderEliminar
    Respuestas
    1. Esta es la otra plantilla entre la que estoy dudando
      http://btemplates.com/2010/blogger-template-post-graduate/

      no sé, por si me puedes decir cuál me puee dar menos problemas...

      Gracias de nuevo por tu tiempo!!

      Eliminar
    2. Hola Gorka, ¿me puedes mostrar una entrada donde hayas puesto un video y éste no se muestre? Porque a simple vista, en la plantilla, no parece haber un indicador de que deban ocultarse.

      Eliminar
    3. Hola Potro, gracias por responder y perdona mi retraso en contestarte

      Todavia no es blog público, pero lo he dejado temporalmente para que puedas entrar ;)

      Aquí tienes la dirección:
      http://refuerzovirtual.blogspot.com.es/

      Muchas gracias por tu tiempo
      Abrazos!!

      Eliminar
    4. Hola de nuevo Gorka, ¿pero en cuál de esas entradas has puesto un video, y qué código has usado para el video? no revisé todas las entradas pero al menos en las dos últimas no aparece ningún contenido dentro del post.

      Eliminar
    5. Pues ahí está Potro... todas las entradas que ves son vídeos, y en la edición de html aparecen, pero en el blog no se ven...
      En las páginas estáticas no hay ningún problema... mira:
      http://refuerzovirtual.blogspot.com.es/p/indice-de-matematicas.html


      Ejemplo de lo que pasa:

      url de la entrada:
      http://refuerzovirtual.blogspot.com.es/2014/04/pi.html

      código html:
      <iframe allowfullscreen="" frameborder="0" height="460" src="//www.youtube.com/embed/eDiSYp_51iY?feature=player_detailpage" width="640"></iframe>

      Gracias gracias gracias.... a ver si lo conseguimos ;)

      Eliminar
    6. Pero pasa con los vídeos y las imágenes...
      http://refuerzovirtual.blogspot.com.es/2011/06/webs-interesantes-para-practicar-ingles.html

      Eliminar
    7. Cuando accedo a una etiqueta, sólo aparecen con imagen las entradas que la tienen, pero al hacer clic en cualquiera, ninguna tiene contenido...
      mira esto:
      http://refuerzovirtual.blogspot.com.es/search/label/geometria

      Eliminar
    8. ¿También con los textos? si es así entonces es un error en la plantilla, no sé si hiciste alguna modificación antes de que eso sucedida, si así fue reinstala la plantilla original y mira si de esa manera se vuelve a ver el contenido del post.

      Eliminar
    9. No. no modifiqué nada. La subi tal cual, y como ves sólo se ven bien las páginas estáticas...
      Vaya, que lo mejor es cambiar de plantilla no? :((
      o hay otra solución??

      Muchas gracias por todo!!!!

      Eliminar
    10. Entonces creo que sí es un error de la plantilla, quizá convenga que pruebes con otra distinta :/

      Eliminar
    11. Muchas gracias Potro por tu tiempo. Pues mira, he probado una tuya que me gustaba de hace tiempo, "bloggerest", pero se superponen los vídeos en el inicio... Puedo hacer algo o pruebo con otra??

      Gracias majo!!!

      Eliminar
    12. http://refuerzovirtual.blogspot.com.es/

      Eliminar
    13. Prueba con estos estilos antes de </head>

      <b:if cond='data:blog.pageType != &quot;item&quot;'>
      <style>
      .post-body iframe {
      width: 200px;
      height: 140px;
      }
      </style>
      </b:if>

      Si agregarás también videos en las páginas entonces quizá convenga que en lugar de esa modificación consideres hacer esta que Oloblogger explica, que es para hacer los videos "responsive":
      http://www.oloblogger.com/2012/12/responsive-imagen-tabla-videos.html

      Eliminar
    14. Gracias Potro!! Es genial!!
      Al final he realizado lo de oloblogger porque tu código funcionaba con los iframes pero no con objects

      Lo único que me falta es que se vea una imagen del vídeo por estética claro... ya me dirás
      Gracias por tu ayuda!!!

      Eliminar
    15. Eso sí te lo debo Gorka, el script de la plantilla no la agrega.

      Eliminar
    16. jajaja sólo faltaba... bastantes horas nos dedicas gratis, como para exigir... Igual pruebo a añadir una imagen a cada post y quizás así quede mejor.. porque otras opciones necesitan más tiempo no?

      Gracias Potro!!

      Eliminar
    17. Supongo que añadir una imagen a cada post será la mejor decisión, además de ese modo puedes elegir la imagen que quieres mostrar para cada entrada. Saludos!

      Eliminar
    18. Me he dado cuenta, que utilizando el siguiente código:

      <div class="video-wrapper"><div class="video-container">
      <iframe width="640" height="400" src="url del video de youtube" frameborder="0" allowfullscreen></iframe>
      </div>
      </div>


      Se ve bien la vista previa de los vídeos de youtube, cuya entrada contenga sólo un vídeo. Si hay más de uno, no aparece imagen de vista previa en la página de inicio. Si en vez de un vídeo es un objeto, este iframe no funciona en la principal.
      Aquí sigo probando cosas... Ya te iré contando más ;)

      Sólo una cosica más. Cuando pongo una imagen (antes del objeto/vídeo para la estética de la página de inicio), queda un poco mal el post en cuestión. Es posible ocultar la vista de esa imagen en el post?? o reducirla a un icono muy pequeñico???

      Gracias Potro!!!

      Eliminar
    19. Y por aprovechar Potro....¿cómo se quitan gadgets en la sidebar de tu plantilla bloggerest?

      Gracias!!

      Eliminar
    20. Perdona, ya he ido a la entrada de ciudadblogger donde tenía que ir...;)

      Gracias por todo!!

      Eliminar
    21. No, los scripts para este tipo de cosas se aplican para todos los posts, no se puede excluir uno en particular.
      Los gadgets se quitan como cualquier otro gadget de cualquier plantilla: Click en Editar > Eliminar.

      Eliminar
  53. Buenas noches.

    He probado el script y funciona.

    El problema es que cuando le pongo las extensiones de youtube por ejemplo start para empezar a mitad del video, end para quitar los aplausos etc, y luego intento visualizar el blog, en lugar de la miniatura del video al tamaño prediseñado (100 x 50 px) me sale una imagen gris muy fea concretamente esta

    http://i.ytimg.com/vi/uJRHht55E1M?rel=0&autoplay=1&start=8%20%20&hd=1/hqdefault.jpg

    he consequido quitarla no sin esfuerzo y que se vea solo el recuadro negro, con el circulo y la flechita dentro, incluso le he cambiado el color y asi se confunde con el fondo del blog y queda solo el circulito pero sombreado.

    pero lo mas grave es que aunque asi me admite las extensiones y empieza el video a mitad y lo termina antes, cuando el usuario lo vuelve a activar, las extensiones quedan desactivadas y hay que tragarselo entero.

    ¿Habria modo de solucionar lo de la imagen gris? ¿Se podria modificar el codigo para que admitiera esas extensiones?

    Saludo cordial y gracias por el esfuerzo diario, eso no tiene precio.

    Carlos

    ResponderEliminar
    Respuestas
    1. Hola Carlos, le problema es que con este método, todos los atributos del video van en el script general que añadimos antes de </body> y ahí definitivamente no deberíamos poner un atributo de tiempo porque entonces todos los videos comenzarían en el mismo lugar que hemos indicado.
      Me temo que este sistema será para los usuarios básicos que sólo quieren mostrar un video y ya, sin necesidad de añadir atributos extra a cada video que inserte. Si ese no es el caso entonces habrá que insertar los videos de la manera tradicional.

      Saludos.

      Eliminar
  54. Tengo un problemilla con el código, todo esta bien, pero tengo usuarios que se quejan que no pueden expandir el vídeo (ponerlo en en full screem), para eso tienen que ir a youtube ya que en la esquina cuando lo reproduce no sale la opción de ampliar, sino la de ir directamente

    ¿se puede cambiar las opciones del código para que se puede ampliar el vídeo en toda la pantalla sin tener que ir a youtube?

    ResponderEliminar
    Respuestas
    1. Depende del navegador con el que entren, en Safari por ejemplo (supongo que también en Chrome) ese botón no aparece en los videos insertados, pero en cambio en Firefox sí se ve.

      Eliminar
  55. Entendido y agradecerte de corazón la respuesta.

    Intente tu solucion buscando otra cosa que excede de mis capacidades:

    Lo que yo pretendia es llamar en el enlace al video de youtube una funcion, concretamente la de cerrar la ventana de reproduccion del video.

    Esto es, la gente pulsa el enlace en mi blog, el video comienza solo con la extension autoplay y a pantalla completa, y luego, tener programado en el html de mi entrada, que en cada uno de los videos , al marcar el enlace se active una funcion de cierre de ventana (y por tanto volver a la pagina principal) una vez transcurridos los milisegundos que dura el video, ya que youtube no tiene una extension para volverte a la pagina de donde venias.

    Saludo muy cordial.

    Carlos

    ResponderEliminar
    Respuestas
    1. También excede mis capacidades :(

      Eliminar
    2. Gracias en cualquier caso, en particular por tu sinceridad.

      Carlos

      Eliminar
  56. Cual seria el codigo para videos de Daylimontion

    ResponderEliminar
    Respuestas
    1. De momento no haré adaptaciones del código por el escaso tiempo del que dispongo. Lo siento :(

      Eliminar
  57. Hola potro, uno mas de los tantos buenos aportes que hay en tu blog, pero tengo una consulta para hacerte, si quisiera agregar un atributo mas al codigo final que aparece luego de darle click a la imagen, que tendria que hacer o agregar?? por ejemplo si quisiera agregarle por ejemplo "Margin".

    Gracias de ante mano, un fiel ciudadano.

    ResponderEliminar
    Respuestas
    1. Gracias por tu comentario Miguel. El código ya incluye un margen, pero si quisieras añadir otro (por ejemplo un padding y un background) tendrías que agregar en el DIV esos estilos:
      padding:10px; background:#ff0000;

      Y luego en el script, antes de this.parentNode.replaceChild(a,this)}}; pondrías:
      a.style.padding=this.style.padding;a.style.background=this.style.background;

      Eliminar
  58. Hola Potro, buenas noches, te quería preguntar, no hay alguna forma de que la vista previa antes de que se reproduzca el vídeo sea una imagen elegida por uno mismo y no la miniatura default del vídeo.

    ResponderEliminar
    Respuestas
    1. Hola Juan. Si es tu video lo podrás editar en el canal de Youtube, pero si no entonces ni modo.

      Eliminar
    2. Este comentario ha sido eliminado por el autor.

      Eliminar
    3. Pues eso mismo Juan Pablo, lo que te ha dicho Robinson me parece que es la única solución viable.

      Eliminar
  59. Saludos, Potro. Muchas gracias por la publicación. ¿De casualidad sabrás como hacer para que se adecue el tamaño en distintas pantallas? Es que, en el ordenador se ve muy bien, pero por ejemplo, en un movil, se ve por la mitad.

    Gracias

    ResponderEliminar
    Respuestas
    1. ¡Ayuda por favor! He tratado de colocar el width: 100%; al igual que el Height y no me funciona, solo puedo visualizarlo colocando medidas normales en px. ¿Será un problema con mi plantilla? la dirección web es: traselgol.blogspot.com

      Eliminar
    2. No he intentado hacer responsive esta manera de insertar los videos, pero en el caso de los videos "normales" puedes ver cómo se hace en esta entrada de Oloblogger:
      http://www.oloblogger.com/2012/12/responsive-imagen-tabla-videos.html

      Eliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

 
Ir Arriba Ir Abajo
I Ciudad Blogger