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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Qta510o962a17Nplk7zezXOg_rxtgFQhT8oN9AbOA1fsN9uztP3-x1r7eTVXMExV1gneqrF4N3mKkzahz42GBkyXFyW34sc4uBJGg87S9k5_yTfLXbEf7DzIQdhtmusJ8c3sckqm699h/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

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

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

• Google
• Facebook
• Twitter