Cargar solo iframe de youtube cuando el usuario pinche en la miniatura del vídeo

Una entrada rápida hoy!

Optimización, optimización y optimización… para los desarrolladores es como un mantra.

En páginas donde tenemos que mostrar varios vídeos, meter los iframes es una carga brutal de archivos innecesarios antes de saber si el usuario va a ver alguno de ellos.

Para evitar esta sobrecarga de estilos, imágenes, etc que trae asociado el iframe de un vídeo de Youtube, existe un script que sólo lo hace cuando el usuario quiera verlo.

Es muy sencillo, simplemente muestra la miniatura del vídeo y la sustituye por el iframe al pinchar.

El script es el siguiente:

(Evidentemente si no vamos a meter el script en el html/php, le quitamos las etiquetas y lo podemos añadir a nuestro archivo .js).

Donde queramos poner la miniatura/vídeo, metemos la siguiente tag:

El id=”XXX..” lo sustituís por el del vídeo y el tamaño, a gusto del consumidor.

4 Responses to “Cargar solo iframe de youtube cuando el usuario pinche en la miniatura del vídeo”

  1. WebModerna | el futuro de la web

    Muchas gracias por tu aporte. Pero ahora tengo una gran duda. Eso que dices que en el id=”XXXX…” va el id del video. Cómo lo obtengo? Y aparte, como podría implementarlo en un sitio con WordPress. O sea, al cliente, hay que hacércela simple: copia el link del video en la barra de direcciones, lo pega en su administrador de contenidos y vualá….debería ser todo automático y funcianar transparente al usuario. Pero lo pobré y no funciona, hay algo que no anda y no le agarro la mano. Incluso ni siquiera funciona en la maqueta html5 que estoy desarrollando y cambiando. Espero que tus respuestas…gracias.

    Responder
    • Diana Aceves

      Hola,
      El id del vídeo lo obtienes del propio enlace de youtube, una forma de obtenerlo es dando a “compartir”, y de la url obtienes el id:P.e. http://youtu.be/1zdzLdlDwTc (La parte en negrita es el id).
      Respecto a cómo implementarlo para que el usuario pueda modificar los vídeos y añadir o cambiar unos por otros, tienes que meter el código en el php que corresponda, el js igual (mejor siempre en el archivo .js con el resto de funciones de la página), y en el administrador deberías habilitarle unos custom field por ejemplo, donde meta el usuario el id, y tú lo recojas desde el php.
      Por tus preguntas deduzco que no tienes demasiada experiencia con WordPress, y sinceramente explicarte con más detalle todo esto sería muy largo. Sorry! Te animo a que sigas avanzando con WP.
      Un saludo.

      Responder
  2. Cotelandia

    Que buen tip! .. una cosa sobre el blog, al momento de escribir el email el color de fondo y color de la letra no es la mejor opción para cuando no es un email valido, ya que no se ve bien lo que uno escribe.

    Responder

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">