Force High Quality Thumbnails for YouTube

Question

Is there a way to force a high quality THUMBNAIL for YouTube?

My videos are of very high quality and once they start streaming they run fine in 720p, however the thumbnail for the video is of variable quality - sometimes it's high, other times it's really blurry.

Is there a way of forcing a high quality thumbnail? I've found this in the API docs - http://code.google.com/apis/youtube/2.0/reference.html#youtube%5Fdata%5Fapi%5Ftag%5Fmedia:thumbnail but it doesn't detail how to use the media tag.

score 22 · Answer 1 · edited May 23 '17 at 12:34

22

There is a "maxres" version as well, which is a "full hd" picture in case that the video resolution is high enough.

http://i.ytimg.com/vi/VIDEO_ID/maxresdefault.jpg

However, if the video resolution isn't high enough, this image doesn't seem to be created. So you might want to have a function that shows a lower quality version in case the "maxres" version doesn't exist.

Check out How do I get a YouTube video thumbnail from the YouTube API? for more info.

edited May 23 '17 at 12:34

Community

1
1

answered Jan 30 '12 at 18:48

Johan Dettmar

27,968
5
31
28

1

Hmm my video is 780p though and plays at high quality but the thumbnail quality is variable. The issue is not guessing the thumbnail, it's getting YouTube to display it below the 'play' symbol. Doesn't look like it's possible so far though. – SparrwHawk Jan 30 '12 at 19:33
I don't know what video or size you're using, but when i tried embedding another hd video, it seems to load the low-res picture if the video player object is too small. And when I embed the same video in a large player (i.e. 1000x700), i get the max-res version. – Johan Dettmar Feb 01 '12 at 23:28
Thanks for the url. Is there a way I can force to use it in a embed video player? – Augustin Riedinger May 19 '14 at 09:58
I think the requirements are `&hd=1` in your iframe url and that the iframe must be larger than 1280x720 pixels, but I can't swear on it. – Johan Dettmar May 19 '14 at 15:36

Evalds Urtans · Answer 2 · 2012-08-10T12:15:26.357

Thanks, Johan for answer.

http://i.ytimg.com/vi/VIDEO_ID/maxresdefault.jpg

If you also want set playback to HQ use Javascript API https://developers.google.com/youtube/js_api_reference?hl=fi-FI#Playback_quality

var qualityLevels = self.players[iframeID].getAvailableQualityLevels();
/* Set highest quality */
self.players[iframeID].setPlaybackQuality(qualityLevels[0]);

In order for this to work we first need to call:

self.players[iframeID].playVideo();

Then it will triggrer

self.players[iframeID] = new YT.Player(iframeID, {
                        events: {
                            'onReady': function(event) {
                                var iframe = $(event.target.getIframe());

                                self.players[iframe.attr('id')].loaded = true;
                            },
                            'onStateChange': function(event) {
                                var iframe = $(event.target.getIframe());
                                var iframeID = iframe.attr('id');

                                if(event.data == 1) /* playing */
                                {
                                    var qualityLevels = self.players[iframeID].getAvailableQualityLevels();

                                    if(self.players[iframeID].getPlaybackQuality() != qualityLevels[0])
                                    {
                                        /* Set highest quality */
                                        self.players[iframeID].setPlaybackQuality(qualityLevels[0]);
                                    }
                                }
                            }
                        }
                    });

score 4 · Answer 3 · answered Mar 29 '13 at 10:41

4

Example:

http://img.youtube.com/vi/xjFouf6j81g/hqdefault.jpg

where xjFouf6j81g, videoid

answered Mar 29 '13 at 10:41

iqmaker

2,162
25
24

Your response is the only one that worked for me, even throughout multiple threads. Thank you. – Whatevo Nov 03 '13 at 15:26
Is that link part of the YouTube API V3 or below? Because if its from V2 or lower, then I'm pretty sure Google will be deprecating it? – May 08 '15 at 11:40
@Dmitriy - See this: http://jsoneditoronline.org/?id=eb9de39901849211fd7fc42daabc6c0b . This json is for video Id: C2omic5yWRQ. It has maxresdefault.jpg has resolution 1280x720, compared to hqdefault.jpg having only 480x360. – saurabheights Aug 07 '16 at 22:16
@saurabheights which URL was this JSON requested from? – agrath Apr 07 '17 at 00:03
@agrath: https://www.youtube.com/watch?v=C2omic5yWRQ. It's simple to make, open any youtube video and replace the value of v argument. – saurabheights Apr 07 '17 at 05:52

score 0 · Answer 4 · answered Dec 26 '15 at 09:24

Issue has been reported here:
https://code.google.com/p/gdata-issues/issues/detail?can=2&start=0&num=100&q=&colspec=API%20ID%20Type%20Status%20Priority%20Stars%20Summary&groupby=&sort=&id=4590

Not a fix or a workaround, but if you want to avoid getting the low-res thumbnail your player should be larger than 430px wide.

So a suggested minimum size for perfect 16:9 aspect would be 432 x 243 pixels and this should get a nice-looking thumbnail.

Martti Laine · Answer 5 · 2012-01-30T06:03:40.187

0

As far as I know, YouTube only offers 4 thumbnails:

http://i.ytimg.com/vi/VIDEO_ID/default.jpg
http://i.ytimg.com/vi/VIDEO_ID/1.jpg
http://i.ytimg.com/vi/VIDEO_ID/2.jpg
http://i.ytimg.com/vi/VIDEO_ID/3.jpg

The thumbnails are generated once after the upload, so you can't alter the size of them in any way.

Edit:
YouTube JS API lets you force the quality of the video, but I don't know if it will affect the video preview. See the docs for more info.

edited Jan 30 '12 at 06:03

answered Jan 29 '12 at 16:03

Martti Laine

12,655
22
68
102

Thanks, but how can I apply them to the video, so that a high quality thumbnail is shown under the 'play' button? – SparrwHawk Jan 29 '12 at 23:46

Force High Quality Thumbnails for YouTube

5 Answers5