web-dev-qa-db-fra.com

Comment obtenir une miniature YouTube à partir d'une iframe YouTube?

Par exemple, j'ai un article de blog qui contient le iframe suivant.

<iframe width="420" height="315" src="//www.youtube.com/embed/1sIWez9HAbA" frameborder="0" allowfullscreen></iframe>

Comment puis-je extraire la vignette de ce iframe?

javascriptjqueryiframeyoutube
31
Mohammed Hâmzã

Vignettes YouTube

Les miniatures YouTube se trouvent dans ce chemin standard:

http://img.youtube.com/vi/[video-id]/[thumbnail-number].jpg
  • [video-id] est l'ID de la vidéo YouTube, par exemple 1sIWez9HAbA.
  • [thumbnail-number] est le numéro de la vignette des 4 que chaque vidéo a généralement, par exemple 0.

Obtention de la vignette à partir d'un iframe

Ainsi, en fonction de l'attribut iframe de src, vous pouvez construire directement l'URL de la vignette.

Par exemple, en utilisant jQuery:

var iframe           = $('iframe:first');
var iframe_src       = iframe.attr('src');
var youtube_video_id = iframe_src.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/).pop();

if (youtube_video_id.length == 11) {
    var video_thumbnail = $('<img src="//img.youtube.com/vi/'+youtube_video_id+'/0.jpg">');
    $(body).append(video_thumbnail);
}

Notez que cet exemple vérifie l'URL du iframe pour un ID vidéo YouTube valide et suppose qu'il contient 11 caractères, ce qui est la norme de facto.

Voir démo jsFiddle

88
Boaz

Obtenez l'image d'affichage par défaut à partir d'ici 

http://img.youtube.com/vi/[video-id]/hqdefault.jpg

exemple: https://img.youtube.com/vi/OYr-KPboPDw/hqdefault.jpg

3
Gopala raja naika