提高 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 仍然是 Google 将视频嵌入网站的“推荐”方法，因此它们也可以在移动设备上运行。

Answer 1

我遇到了类似的问题并想出了这个解决方案：

• 制作包含高分辨率缩略图的图像（来自 url）
• 在下面创建一个具有所需分辨率的 iframe（使用 z-index）
• 使用 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 : 进行更改后清理您的网络浏览器缓存

Answer 3

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