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

While Playing - 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.

Pernambuco

Have you considered this? #13726183 – Iscariot

Answer 1

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/

Oxley

Thanks for your answer.. really good idea what I hadn't thought of doing at all. It's possible I'll end up using something like this but for now I'm going to leave the question open in the hope of a "cleaner" solution (looking doubtful). Thanks again! – Pernambuco

Damn, sorry, I meant to give you the full bounty for this but missed the 24 hour period :( – Pernambuco

Answer 2

Youtube iframe auto attribute a picture quality depending on the properties of height and width define inside the iframe. If no height and width define, Youtube is gonna take the lower quality available.

Remember, it's not recommended to define CSS inside HTML.

<iframe src='...' width='480' height='315'>

PS : clean up your web-browser cache after making the changes

Banville

It doesn't work. I've tried with cache disabled, I've tried in Icognito mode. It won't work. The selected answer seems like the best ideea. – Denison

Answer 3

a simple way to solve this,edit basic information for your video,upload a high resolution image and set as the thumbnail,then save

Hyunhz