提高 YouTube 缩略图质量？

Posted 2023-02-24

【中文标题】提高 YouTube 缩略图质量？

【英文标题】：Improve YouTube thumbnail quality?

【发布时间】：2014-04-07 13:21:56

【问题描述】：

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

【问题讨论】：

你考虑过这个吗？ ***.com/questions/13725683/…

【参考方案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/

【讨论】：

感谢您的回答.. 真是好主意，我根本没想过要做。有可能我最终会使用这样的东西，但现在我将留下这个问题，希望有一个“更清洁”的解决方案（看起来很可疑）。再次感谢！

该死，对不起，我本打算为此给你全部赏金，但错过了 24 小时 :(

【参考方案2】：

Youtube iframe 自动属性图片质量取决于 iframe 内部定义的高度和宽度属性。如果没有定义高度和宽度，Youtube 将采用较低的质量。

请记住，不建议在 html 中定义 CSS。

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

PS : 进行更改后清理您的网络浏览器缓存

【讨论】：

它不起作用。我试过禁用缓存，我试过 Icognito 模式。它行不通。选择的答案似乎是最好的想法。

【参考方案3】：

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