Como crear enlaces a videos de YouTube usando sus miniaturas

En cientos de miles de páginas web de internet se insertan videos de YouTube, usando el método que ofrece este sistema de alojamiento, que consiste en un código de inserción en JavaScript que escribe el reproductor.
En otro artículo compartimos una alternativa para optimizar este método y lograr que los videos de YouTube sean adaptables.
También existe otra opción mucho más sencilla, con la ventaja que requiere de menos código, que hace que las páginas se carguen mucho más rápido.
Consiste en crear enlaces a los videos, usando las miniaturas originales que genera el servicio de YouTube, con HTML, sin tener que emplear JavaScript.
De esta forma se pueden crear enlaces a decenas de videos en una misma página, sin perjudicar el rendimiento.
En este artículo explicamos cómo hacerlo y mostramos varios ejemplos.

Direcciones de las miniaturas de los videos de YouTube

Cada video alojado en YouTube posee varias miniaturas de distinto tamaño, que lo representan.
Son imágenes con la vista previa de distintos cuadros (frames).
La principal de ellas o predeterminada (default.jpg), es especificada por el autor y hay tres cuadros que son generados automáticamente por el servicio.
Cada una de estas miniaturas tiene un nombre de archivo determinado, por lo que pueden cargarse en el navegador usando la siguiente dirección:
Solo debemos sustituir VIDEO_ID por la identidad del video, que son los 11 caracteres que aparecen al final de la dirección URL del video.
Los nombres de archivos de las miniaturas son los siguientes:

Todas las miniaturas de un video de YouTube

A continuación se muestran todas las miniaturas que se obtienen del video Sorry de Justin Bieber, usando las direcciones que les corresponden.
Miniaturas default.jpg, 1.jpg, 2jpg y 3.jpg, todas de 120 x 90 pixeles.

Miniatura 0.pg, similar a la hqdefault.jpg, ambas de 480 x 360 pixeles

Ver en una nueva pestaña la Miniatura maxresdefault.jpg de 1280 x 720 o de 1920×1080 pixeles, solo disponible en videos en alta resolución.

Insertar imágenes para enlazar videos de YouTube

Conociendo las direcciones necesarias, podemos crear uno o varios enlaces a videos de YouTube en cualquier página web, usando el siguiente código: Un ejemplo es el siguiente código que nos permite crear un enlace al video Sorry de Justin Bieber, usando la miniatura hqdefault.jpg.
El resultado es el siguiente, al dar un clic encima los lectores cargarán el video en una nueva pestaña del navegador.

Crear links con imágenes para enlazar varios videos

Con el código anterior podemos insertar en cualquier página enlaces a varios videos de YouTube usando sus miniaturas, con la ventaja de que las imágenes cargan rápido y no afectan el rendimiento.
Cuando se trata de muchos videos podemos enlazar las miniaturas más pequeñas de 120 x 90 pixeles.
También tenemos la opción de mostrar encima de ellas el botón o icono tradicional de reproducir, cargándolo desde: https://i.imgur.com/TxzC70f.png
Podemos alinearla con CSS asignándole una clase y usando en la hoja de estilo:
El valor de los parámetros margin-left y margin-top dependen del tamaño de las miniaturas usadas.