Improve the quality of YouTube thumbnails?

Question

YouTube thumbnails look awful if embedded in a web page using iFrame code. As soon as the video starts playing, the quality looks absolutely normal.

Here is an example video: http://jsfiddle.net/x5829/

Before the game - poor quality miniature

During the game - good quality

For some reason, it seems that a high-quality image of hqdefault.jpg is used , and not maxresdefault.jpg, which would be much better.

I tried to increase the size of the iFrame to 1280x720and even higher, but it seems nothing has changed.

Is there anything you can do, perhaps using the JavaScript API, to force the use of thumbnail quality? All videos we use will be 720p, guaranteed.

In conclusion (I don’t think this is important), we upload the video using the YouTube API (V3) and then set the thumbnail using the API. But the same thing happens when using an automatically generated thumbnail selected by YouTube.

Edit - I wondered if this would improve over time, I thought that maybe YouTube will optimize it, say, in 24 hours, but after a few days it is still the same.

Edit 2 - As far as I know, iFrame is still Google’s “recommended” method of posting videos to the site so that they also work on mobile devices.

Answer 1

:

• thumbnail ( url)
• iframe ( z-index)
• : absolute

• ,

  .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;
  }
  

, youtube . , , .

.

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

Answer 2

Youtube iframe , iframe. , YouTube .

, CSS HTML.

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

PS: