Día 6: Plugin jQuery para thumbs de YouTube

Este pequeño plugin de jQuery te ayudará a sustituir una url de YouTube con el thumb correspondiente dentro de un contenedor.

Los siguientes contenedores tienen la clase .youtube-img y dentro de ellos está una URL de YouTube.

youtube.com/watch?v=TsFAuLE-Pmw youtu.be/XkDsCn2r_gg

Después del plugin, dentro de los contenedores se reemplazan la URLs por las imagenes de sus videos.

El plugin es cuestión el siguiente: se utiliza una expresión regular para encontrar el ID de la URL de Youtube para después generar la URL de thumbs de este servicio. Paso siguiente, se borra la URL del contenedor y se le agrega un tag img con el thumb en cuestión.

(function ($) {
  $.fn.imgtube = function () {
    return this.each(function () {
      url = $(this).text();
      // http://stackoverflow.com/a/4811367/992000
      video = url.match(/^.*(youtu.be\/|v\/|embed\/|watch\?|youtube.com\/user\/[^#]*#([^\/]*?\/)*)\??v?=?([^#\&\?]*).*/)[3];
      final = "http://img.youtube.com/vi/" + video + "/0.jpg";
      $(this).text('').append("<img src='"+final+"'/>");
    });
  };
}(jQuery));

Y se inicializa con la siguiente instrucción.

$(".youtube-img").imgtube();

Copia y pega ambos códigos en tu script.js o al final de tu documento. Utilizalo con sabiduría o cómo referencia para algo más elaborado.


palabras / Compartir en: Facebook , Twitter o copiar enlace