jQuery: ottenere le immagini dei video da un URL di YouTube

Dall'URL di un video di YouTube è possibile estrarre la stringa che corrisponde all'ID del video. Usando questo ID possiamo anche reperire le immagini associate al video. Solitamente queste immagini sono in due formati: big (grande) e small (thumbnail). In questo articolo vedremo come ottenere questo risultato con jQuery.

Possiamo creare la seguente funzione di utility:

function getYouTubeVideoImage(url, size) {
    if (url === null) {
        return '';
    }

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

    if (url.indexOf('watch?v=') != -1) {
        results = url.replace('http://www.youtube.com/watch?v=', '');
        vid = results;
    } else if (url.indexOf('youtu.be') != -1) {
        results = url.replace('http://youtu.be/', '');
        vid = results;
    }


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

La funzione estrae l'ID del video dall'URL di quest'ultimo e lo usa per generare l'URL dell'immagine corrispondente. Questa funzione supporta sia il formato esteso che quello ridotto degli URL di YouTube.

Un esempio:

$('#youtube').append('<img src="' + getYouTubeVideoImage('http://youtu.be/EkkqaVEU_wU') + '"/>');
$('#youtube').append('<img src="' + getYouTubeVideoImage('http://www.youtube.com/watch?v=EkkqaVEU_wU', 'small') + '"/>');​

Potete visionare l'esempio finale in questa pagina.