Jquery: YouTube video thumbnail

Un piccolissimo plugin Jquery che ci permette di 'recuperare' la thumbnail di un video o l'immagine di un frame dello stesso video con estrema semplicità offrendo la possibilità di una preview al volo magari linkata all'url dello stesso video su YouTube.

Dopo aver caricato le librerie Jquery (qui l'articolo), inseriamo lo script, il plugin in questione è questo (sito web dell'autore):

(function($){
    $.extend({
        jYoutube: function( url, size ){
            if(url === null){ return ""; }

            size = (size === null) ? "big" : size;
            var vid;
            var results;

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

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

            if (size == "small") {
                return "https://img.youtube.com/vi/"+vid+"/2.jpg";
            } else {
                return "https://img.youtube.com/vi/"+vid+"/0.jpg";
            }
        }
    })
}) (jQuery);

Supponendo di aver all'interno della nostra pagina un div con id thumb, il caricamento dell'immagine avverrà con questa chiamata per visualizzare l'immagine grande:

$(document).ready(function(){
url = $.jYoutube('https://www.youtube.com/watch?v=yucAuHbe5Kg');
$('#thumbs').append($('<img src="'+url+'" />'));       
});

o con questa per visualizzare la thumb

$(document).ready(function(){
url = $.jYoutube('https://www.youtube.com/watch?v=yucAuHbe5Kg', 'small');
$('#thumbs').append($('<img src="'+url+'" />'));       
});

Naturalmente la definizione dell'url di riferimento del video potrà anche esser fatta in modo dinamico!