How to get a YouTube thumbnail from a YouTube iframe?
Solution 1
YouTube thumbnails
YouTube thumbnails can be found in this standard path:
http://img.youtube.com/vi/[video-id]/[thumbnail-number].jpg
-
[video-id]
is the YouTube video ID, e.g.1sIWez9HAbA
. -
[thumbnail-number]
is the number of the thumbnail of the 4 each video usually has, e.g.0
.
Getting the thumbnail from an iframe
So, based on the iframe
's src
attribute you may construct the URL of the thumbnail directly.
For example, using 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);
}
Note this example checks the URL of the iframe
for a valid YouTube video ID and assumes it to be 11 characters long, which is the de facto standard.
See jsFiddle Demo
Solution 2
Get Youtube thumbnail images using below urls
Low quality
https://img.youtube.com/vi/[video-id]/sddefault.jpg
medium quality
https://img.youtube.com/vi/[video-id]/mqdefault.jpg
High quality
http://img.youtube.com/vi/[video-id]/hqdefault.jpg
maximum resolution
http://img.youtube.com/vi/[video-id]/maxresdefault.jpg
example: https://img.youtube.com/vi/OYr-KPboPDw/hqdefault.jpg
Solution 3
This function work with all types of youtube links & domains such as
https://www.youtube.com/watch?v=WZKW2Hq2fks
https://www.youtube.com/embed/WZKW2Hq2fks
https://youtu.be/WZKW2Hq2fks?t=66
And you can get the quality you want.
To use it:
// quality options: low, medium, high, max | default is max.
var thumbnail = get_youtube_thumbnail('https://youtu.be/WZKW2Hq2fks', 'max');
console.log(thumbnail);
function get_youtube_thumbnail(url, quality){
if(url){
var video_id, thumbnail, result;
if(result = url.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/))
{
video_id = result.pop();
}
else if(result = url.match(/youtu.be\/(.{11})/))
{
video_id = result.pop();
}
if(video_id){
if(typeof quality == "undefined"){
quality = 'high';
}
var quality_key = 'maxresdefault'; // Max quality
if(quality == 'low'){
quality_key = 'sddefault';
}else if(quality == 'medium'){
quality_key = 'mqdefault';
} else if (quality == 'high') {
quality_key = 'hqdefault';
}
var thumbnail = "http://img.youtube.com/vi/"+video_id+"/"+quality_key+".jpg";
return thumbnail;
}
}
return false;
}
Related videos on Youtube
Hamza Dhamiya
Updated on May 17, 2021Comments
-
Hamza Dhamiya almost 3 years
For instance I have a blog post that has the following
iframe
.<iframe width="420" height="315" src="//www.youtube.com/embed/1sIWez9HAbA" frameborder="0" allowfullscreen></iframe>
How can I extract the thumbnail from this
iframe
?-
Caike Bispo about 6 yearsYou can also change the thumbnails qualities. Eg. Default img.youtube.com/vi/insert-youtube-video-id-here/default.jpg High Quality Thumbnail img.youtube.com/vi/insert-youtube-video-id-here/hqdefault.jpg Medium Quality img.youtube.com/vi/insert-youtube-video-id-here/mqdefault.jpg Standard Definition img.youtube.com/vi/insert-youtube-video-id-here/sddefault.jpg Maximum Resolution img.youtube.com/vi/insert-youtube-video-id-here/… Font and more info: thewebtaylor.com/articles/…
-
-
Hamza Dhamiya over 10 yearsI want to know why your used .pop()
-
Boaz over 10 yearsUpdated the answer to more accurately match the video ID in the
iframe
's URL. In this instance, the.pop()
method returns the last group match of the regular expression - the video ID. -
Dal about 6 yearsYou just saved me hours. I was trying to scrape the page for the progress images that pop up when you hover over the time progress bar since I couldn't find any thumbnail images hidden in the page when you're watching a video. Wasn't working nicely. Thank you.