Miniatura que carga un vídeo al hacer clic sobre ella | Oloblogger El otro día vimos un cargador de vídeos en el que la parte complicada estaba en el marcado HTML y l...

4 de mayo de 2015

Miniatura que carga un vídeo al hacer clic sobre ella

El otro día vimos un cargador de vídeos en el que la parte complicada estaba en el marcado HTML y la sencilla era el correspondiente JavaScript. Ahora, para hacer otra cosa distinta y que consiste en (como en Cenicienta con la calabaza-carroza) mostrar una miniatura o captura de un vídeo y luego cargar este al hacer clic sobre ella, vamos a hacer lo contrario, complicar el JavaScript para así hacer lo más fácil posible la tarea -más cotidiana- de insertar vídeos en nuestras páginas.

El resultado resulta más liviano que insertar el código que nos facilita YouTube porque no cargamos el vídeo hasta que se necesita, sino sólo una imagen. Como complemento, el conjunto será adaptable a todo ancho de pantalla, que es lo que toca en estos tiempos.

Como beneficio adicional, tendremos para nuestros posts una miniatura que el código normal de un vídeo no nos proporciona y que tanto nos gusta ver cuando se comparte en redes sociales.

Para empezar a probar puedes hacer clic sobre la siguiente imagen y verás cómo sería el resultado.


Para conseguir este efecto sólo has de incluir el siguiente código:

CSS


Si estás en Blogger habrás de editar plantilla e insertar todo esto antes del cierre }]]></b:skin> o bien añadirlo desde el diseñador de plantillas.

.videocaja {width: 800px;max-width: 100%; margin: 0 auto;}
[id^=video] {position: relative;padding-bottom: 56.25%;padding-top: 30px;height: 0;overflow: hidden; background: #000;}
[id^=video] iframe,[id^=video] object,[id^=video] embed {position: absolute;top: 0; left: 0;width: 100%;height: 100%;}
[id^=video] img {position: absolute;top: 0;bottom: 0;margin: auto;width: 100%;height: auto;cursor: pointer;}
[id^=video]:after {content: url(http://4.bp.blogspot.com/-IDtvyNN05fU/VUS8QFodKkI/AAAAAAAATgY/gtaenkp-iY0/s1600/play-overlay.png);position: absolute;top: 50%;margin-top: -38px;left: 50%;margin-left: -38px;z-index: 1;cursor: pointer;}
.vacio:after {content:"" !important;}

JavaScript


Si no abandonaste la edición de plantilla, desde ahí mismo puedes añadir la parte JavaScript antes del </head>. Si ya tienes jQuery elimina la primera línea de todas (tras el comentario, claro).

<!-- GESTION DE VIDEOS -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
$("document").ready(function() {
$("div[id^=video]").click(function() {
var idcaja = $(this).attr("id");
var idvideo = $("#"+idcaja+" img").attr("src").split("/")[4];
var ytvideo = "<iframe src='https://www.youtube.com/embed/" + idvideo + "?rel=0&autoplay=1' frameborder='0' allowfullscreen></iframe>";
$("#"+idcaja).addClass("vacio");
document.getElementById($(this).attr("id")).innerHTML = ytvideo;
});
});
//]]></script>

HTML


Ya tenemos todo preparado, así que a partir de ahora, cada vez que quieras incluir un vídeo en una entrada o página, sólo tienes que incluir el siguiente código modificando únicamente la identificación del vídeo.

<div class="videocaja"><div id="video1"><img src="http://img.youtube.com/vi/zWCINQn6k0s/hqdefault.jpg" /></div></div>

Ese identificador es el conjunto alfanumérico de 11 caracteres que marqué en otro color. Eso es lo único, como decía antes, que tienes ir cambiando.

Para obtener el de cualquier vídeo sólo tienes que fijarte en la URL que se mostrará en tu navegador cuando visites alguno:


O bien extraerlo del enlace que aparece al pinchar sobre Compartir:



Para incluir un segundo vídeo dentro de la misma página y puesto que las id tienen que ser únicas, en el marcado HTML deberás usar video2 en lugar de video1. Para más vídeos por página continuar con la secuencia sin problemas. Ejemplo funcionando.





Explicación del JavaScript


Como ya nos vamos conociendo y esto le importa sólo a una minoría, las explicaciones sobre cómo funciona esto las he dejado para el final :)

Tras la línea que carga jQuery se indica que el plugin no se ejecutará hasta que sea cargada toda la página y así poder manipular correctamente todos los elementos que se tienen que "dibujar" sobre ella:

$("document").ready(function() {

Esperamos hasta que se haga clic sobre alguna caja que lleve una id que empiece por video. En el ejemplo de esta entrada sería video1, pero con el selector de atributos que se utilizó, todas la que empiecen por esos caracteres serán susceptibles de ser objeto de tratamiento y por eso funcionará con video2, video3, etc.

$("div[id^=video]").click(function() {

Una vez que se entra lo primero es averiguar la id de la caja contenedora sobre la que hemos hecho clic (video1 en el ejemplo) para tenerla como referencia para extraer más datos de ella y finalmente insertar ahí mismo el código que construirá/cargará el vídeo:

var idcaja = $(this).attr("id");

Ahora necesitamos la id que tiene el vídeo. Esta la obtenemos de la miniatura que hemos incluido en la parte HTML (http://img.youtube.com/vi/zWCINQn6k0s/hqdefault.jpg) cortando la URL incluida en su src por la barras (/) y grabando el cuarto segmento que es el que nos interesa en una variable llamada idvideo y la clase .vacio):

var idvideo = $("#"+idcaja+" img").attr("src").split("/")[4];

Ahora vamos a reconstruir el código de inserción que nos da YouTube, que es igual en todos los casos y que sólo se distingue precisamente en la id propia de cada vídeo. Añado un autoplay porque de lo contrario habría que hacer clic una segunda vez tras cargarlo:

var ytvideo = "<iframe src='https://www.youtube.com/embed/" + idvideo + "?rel=0&autoplay=1' frameborder='0' allowfullscreen></iframe>";

Lo siguiente añade a la caja contenedora pulsada, una nueva clase para eliminar el "botón" con forma de triángulo dentro de un círculo que mediante CSS hemos añadido sobre la imagen (ver en la parte CSS el selector [id^=video]:after):

$("#"+idcaja).addClass("vacio");

¿Y qué nos queda? Pues ya sólo sustituir el contenido original de la caja contenedora mediante su id, por este código anterior que forma el vídeo propiamente dicho (ytvideo). Luego cerrar y cerrar:

document.getElementById($(this).attr("id")).innerHTML = ytvideo;
});
});

Y para experimentar...

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

16 comentarios :

  1. muchas gracias muy bueno ;)

    ResponderEliminar
  2. Te quedo excelente Oloman. Los tiempos cambian y la carga importa muchisimo.

    ResponderEliminar
  3. Creo que lo que me quedó fue sencillo. Una vez puesto el código base, añadir un vídeo no puede ser más fácil... amén de lo dicho sobre la carga y la adaptabilidad. Gracias a ambos

    ResponderEliminar
  4. Yo el sistema que utilizo es el de Ventanas Modales de "Shadowbox". Es lo mismo ??

    ResponderEliminar
    Respuestas
    1. Me temo que no. Shadowbox me parece recordar que es un sistema de ventanas emergentes.
      Eso lo que hace es que al pinchar en determinado sitio, abre un contenido que inicialmente sí está cargado pero oculto y lo muestra en una ventana que se solapa sobre el contenido.
      En este sistema no escondemos el vídeo, simplemente no lo cargamos y lo hacemos posteriormente a demanda, al pinchar sobre la miniatura.
      Aparte de esto, el resultado estético es muy distinto también, en este caso en favor de las ventanas emergentes.

      Eliminar
  5. Hola tus entradas son muy interesantes y de mucha ayuda para personas como yo. Saludos y gracias

    ResponderEliminar
  6. Pues no sé porqué pero aunque la miniatura del segundo video es correcta y las id distintas, se visualiza el primer video al picar en el segundo.

    ¿Alguna sugerencia?

    ResponderEliminar
    Respuestas
    1. Sí, volver a probar con el nuevo código que puse :)
      Cometí un error al montar el post y por eso fallaba. Ya lo he reconstruído. Tu comentario me ha servido de aviso. Gracias.

      Eliminar
  7. Me gusta y aparte es muy interesante, quizas lo aplique para cuando ponga videos, gracias.
    Por cierto para las imagenes, hay algo parecido?

    ResponderEliminar
    Respuestas
    1. Parecido, parecido... hmm ¿para qué cargar una imagen desde otra imagen? Supongo que quieres decir que no se cargue hasta que haga falta. Busca por ahí "Lazyload" y a ver si es eso lo que quieres ;)

      Eliminar
  8. Ahora sí funciona correctamente. Muy útil me parece este truco. Gracias por la rápida respuesta.

    ResponderEliminar
  9. hola amigo no se si me podrías ayudar a crear un menú con opciones para reproductores de películas o tvonline. asi como estas >>>>> http://3.bp.blogspot.com/-uQf7ODicBIY/VYTEmNuh8TI/AAAAAAAABpg/2EOfi-wVxtU/s1600/Sin%2Bt%25C3%25ADtulo.png
    agradeseria tu respueste

    ResponderEliminar
    Respuestas
    1. Hola Elio
      Aquí tienes un cargador de vídeos y un código con el que poder empezar. Cambiando algunas cosas seguro que puedes conseguir exactamente eso que quieres.

      Eliminar
  10. gracias me sirvio buscaba eto dede hace mucho

    ResponderEliminar
  11. Me sirvio bastante, pero cuando agregue un script para "apagar las luces" al ver videos este ultimo me funciono mal. Es algo asi

    ResponderEliminar
    Respuestas
    1. Evidentemente es porque un código interfiere en el otro. Posiblemente hay nombres de variables que coincidan.

      Eliminar