改善YouTube缩略图质量？

Question

当通过iFrame代码嵌入网页时,YouTube缩略图显得很糟糕.一旦视频开始播放,质量看起来绝对正常.

这是一个示例视频:http: //jsfiddle.net/x5829/

播放前 - 质量不佳的缩略图

在玩耍时 - 质量好

无论出于何种原因,它似乎使用的是hqdefault.jpg质量图像,而不是maxresdefault.jpg,它的质量要高得多.

我已经尝试将iFrame维度增加到1280x720甚至更高,似乎没有任何区别.

是否可以使用JavaScript API完成任何操作以强制使用缩略图质量？我们使用的所有视频都是720p,保证.

最后一点(我认为这不重要),我们使用YouTube API(V3)上传视频,然后通过API设置缩略图.但是,使用YouTube选择的自动生成的缩略图时会发生同样的事情.

编辑 -我想知道这是否会随着时间的推移而改善,想想也许YouTube会在24小时内对其进行优化,但几天之后它仍然是相同的.

编辑2 -据我所知,iFrame仍然是谷歌在网站上嵌入视频的"推荐"方法,因此它们也适用于移动设备.

Answer 1

我有一个类似的问题,并提出了这个解决方案:

• 制作包含高分辨率缩略图的图像(来自网址)
• 在下面(使用z-index)制作一个具有所需分辨率的iframe
• 使用position: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/