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.

Answer 1

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.

Answer 2

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]);
                                    }
                                }
                            }
                        }
                    });

Answer 3

Example:

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

where xjFouf6j81g, videoid

Answer 4

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.

Answer 5

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.