改善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仍然是谷歌在网站上嵌入视频的“推荐”方法，因此它们也适用于移动设备。 / p>

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/

Answer 2

Youtube iframe会根据iframe内部定义的高度和宽度属性自动为图片质量分配属性。如果没有定义高度和宽度，则Youtube将采用较低的质量。

请记住，不建议在HTML内定义CSS。

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

PS：进行更改后清理Web浏览器缓存

Answer 3

一种简单的解决方法，编辑视频的基本信息，上传高分辨率图像并设置为缩略图，然后保存