Improve YouTube thumbnail quality?

Question

YouTube thumbnails are appearing terrible when embedded in a webpage via the iFrame code. Once the video starts playing, the quality looks absolutely fine.

Here's an example video: http://jsfiddle.net/x5829/

Before Playing - Bad Quality Thumbnail YouTube Embedded iFrame Bad Quality Thumbnail

While Playing - Good Quality YouTube Embedded iFrame Good Quality

For whatever reason, it seems to be using the hqdefault.jpg quality image, rather than the maxresdefault.jpg which would be far greater quality.

I've tried increasing the iFrame dimensions to 1280x720, and even higher, and nothing seems to make a difference.

Can anything be done, perhaps with the JavaScript API, to force the thumbnail quality to use? All the videos we use will be 720p, guaranteed.

As a final note (I don't think this is important), we're uploading the video using the YouTube API (V3), then setting the thumbnail via the API. But the same thing happens when using an auto-generated thumbnail chosen by YouTube.

Edit - I wondered if this would improve with time, thought maybe YouTube would optimise it over say 24 hours, but several days later it's still the same.

Edit 2 - As far as I'm aware, the iFrame is still Google's "recommended" method of embedding videos on a site, so that they'll work on mobile devices as well.

Have you considered this? stackoverflow.com/questions/13725683/… — Praxis Ashelin

koziez koziez · Accepted Answer · 2014-03-07T23:12:18

I had a similar issue and came up with this solution:

make an image that contains the high res thumbnail (from url)
make an iframe underneath (using z-index) with desired resolution
align both of these using position:absolute

surround both by link that will make image disappear on hover

.video-box{
    height:220px;
    width:391px;
    position:relative;
}

.video-thumbnail{
    z-index:300;
    position:absolute;
    top:0;
    left:0;
    width:100%;
}

.video-frame{
    z-index:100;
    position:absolute;
    top:0;
    left:0;
    width:100%;
}

.thumbnail-link .video-thumbnail{
    display:block;
}

.thumbnail-link:hover .video-thumbnail{
    display:none;
}

On hover the lower quality thumbnail will show, however the youtube play button will be more prominent. Also, it will appear to look like the background is sort of being blurred.

Let me know your thoughts.

example: http://jsfiddle.net/d9D9E/1/

Improve YouTube thumbnail quality?

3 Answers