Como conseguir la miniatura de un vídeo de YouTube con JavaScript

Hoy aprenderemos a como conseguir la miniatura de un vídeo de YouTube con JavaScript, algo muy útil cuando desarrollamos una aplicación web que se apoya en YouTube para consumir vídeos bajo demanda.

Bien, imaginate que necesitamos sacar la miniatura, imagen de portada, thumbnail, o thumb de este video: https://www.youtube.com/watch?v=YkKIthn9-b4

Pues seria tan fácil como usar una url como está y nos conseguirá la miniatura de ese vídeo en concreto:
http://img.youtube.com/vi/IDENTIFICADOR_DEL_VIDEO/0.jpg

Donde identificador del vídeo sería el parametro get que hay en la url del video de YouTube original, por ejemplo:
De esta url https://www.youtube.com/watch?v=YkKIthn9-b4 el identificador del video es lo que está detrás del parametro ?v=, en este caso sería YkKIthn9-b4

Por tanto para conseguir la miniatura de un vídeo de YouTube en concreto usariamos esta url:
http://img.youtube.com/vi/YkKIthn9-b4/0.jpg

Dando como resultado esto:
Conseguir la miniatura de un video de youtube

Youtube genera 4 imagenes por defecto. Que son estas:
https://img.youtube.com/vi/IDENTIFICADOR_DEL_VIDEO/0.jpg
https://img.youtube.com/vi/IDENTIFICADOR_DEL_VIDEO/1.jpg
https://img.youtube.com/vi/IDENTIFICADOR_DEL_VIDEO/2.jpg
https://img.youtube.com/vi/IDENTIFICADOR_DEL_VIDEO/3.jpg

Ahora bien, si queremos conseguir más control con respecto a la definición y el tamaño de la imagen de la miniatura que estamos consiguiendo podemos usar las siguientes urls:

Tamaño pequeño: https://img.youtube.com/vi/IDENTIFICADOR_DEL_VIDEO/default.jpg
Tamaño mediano: https://img.youtube.com/vi/IDENTIFICADOR_DEL_VIDEO/hqdefault.jpg
Tamaño estándar de las miniaturas: https://img.youtube.com/vi/IDENTIFICADOR_DEL_VIDEO/mqdefault.jpg
Tamaño grande: https://img.youtube.com/vi/IDENTIFICADOR_DEL_VIDEO/sddefault.jpg
Máxima calidad de la miniatura: https://img.youtube.com/vi/IDENTIFICADOR_DEL_VIDEO/maxresdefault.jpg

Entonces sabiendo esto, vamos a programar una función que nos permita conseguir la miniatura de un vídeo de YouTube con JavaScript muy fácilmente. A esta función que vamos a crear le vamos a pasar como parámetros, la url del video de youtube y el tamaño o calidad que queremos de la imagen thumbnail.

Así quedaría la función:

function getThumb(url, size) {

 var video, results, thumburl;

  if (url === null) {

      return '';

  }

  results = url.match('[\\?&]v=([^&#]*)');

  video   = (results === null) ? url : results[1];

  if(size != null) {

      thumburl = 'http://img.youtube.com/vi/' + video + '/'+ size +'.jpg';

  }else{

      thumburl = 'http://img.youtube.com/vi/' + video + '/mqdefault.jpg';

  }

   return thumburl;

 }

Esta función lo que hace es extraer de la url original del vídeo el identificador, mediante una expresión regular, y luego devolver la url de la miniatura en base a ese identificador básicamente.

Ahora solamente tenemos que usar nuestro método cada vez que queramos conseguir la miniatura de un vídeo de YouTube con JavaScript:

getThumb("https://www.youtube.com/watch?v=YkKIthn9-b4");

Esto a sido todo por este tutorial, recuerda que si quieres aprender JavaScript y desarrollo web avanzado con JS y Angular puedes apuntarte a estos dos cursos:

Oscar perez

Arquitecto especialista en gestion de proyectos si necesitas desarrollar algun proyecto en Bogota contactame en el 3006825874 o visita mi pagina en www.arquitectobogota.tk