NorfiPC
NorfiPC » Códigos » Enlaces a videos

Como crear enlaces a videos de YouTube usando sus miniaturas



Códigos en HTML para insertar imágenes que enlazan videos de YouTube en las páginas de mi sitio, sin usar JavaScript. Direcciones URL de las miniaturas disponibles en distintos tamaños.
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:
https://i.ytimg.com/vi/VIDEO_ID/nombre-de-archivo
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:
default.jpg – Imagen predeterminada de 120 x 90 pixeles
0.jpg - Imagen predeterminada de 480 x 360 pixeles
1.jpg – Imagen 1 generada por YouTube de 120 x 90 pixeles
2.jpg – Imagen 2 generada por YouTube de 120 x 90 pixeles
3.jpg – Imagen 3 generada por YouTube de 120 x 90 pixeles
hqdefault.jpg - Imagen predeterminada de 480 x 360 pixeles (similar a 0.jpg)
maxresdefault.jpg - Imagen predeterminada de 1280 x 720 o de 1920×1080 pixeles. Solo disponible en videos en alta resolución (720p o 1080p).



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 default.jpg del video Sorry de Justin Bieber en YouTube Miniatura 1.jpg del video Sorry de Justin Bieber en YouTube Miniatura 2.jpg del video Sorry de Justin Bieber en YouTube Miniatura 3.jpg del video Sorry de Justin Bieber en YouTube
Miniatura 0.pg, similar a la hqdefault.jpg, ambas de 480 x 360 pixeles
Miniatura 0.jpg del video Sorry de Justin Bieber en YouTube
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:
<a href="VIDEO_URL"><img src="MINIATURA_URL"></a>
Un ejemplo es el siguiente código que nos permite crear un enlace al video Sorry de Justin Bieber, usando la miniatura hqdefault.jpg.
<a href="https://www.youtube.com/watch?v=fRh_vgS2dFE" target="_blank"><img src="https://i.ytimg.com/vi/fRh_vgS2dFE/hqdefault.jpg" width="480" height="360" alt="Video Sorry de Justin Bieber en YouTube"></a>
El resultado es el siguiente, al dar un clic encima los lectores cargarán el video en una nueva pestaña del navegador.
Video Sorry de Justin Bieber en YouTube



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:
height:72px;width:72px;left:50%;top:50%;margin-left:-36px;margin-top:-36px;position:absolute;
El valor de los parámetros margin-left y margin-top dependen del tamaño de las miniaturas usadas.

Páginas relacionadas



Sígueme en las redes sociales




Buscar en este sitio

 
Inicio | Mapa del sitio | Sobre mí | RSS