YouTube 嵌入播放器：缩略图对于小型播放器是像素化的，但对于大型播放器来说看起来不错

Posted 2023-02-24

【中文标题】YouTube 嵌入播放器：缩略图对于小型播放器是像素化的，但对于大型播放器来说看起来不错

【英文标题】：YouTube Embed Player: Thumbnails are pixelated for small player, but look fine for large player

【发布时间】：2019-11-26 13:45:01

【问题描述】：

我只是使用默认的 YouTube 嵌入代码（由 YouTube 生成）在我的网站上显示视频。对于 YouTube 播放器使用相当窄的宽度（320 像素宽）的布局，视频缩略图的质量非常低，明显像素化。但是，对于 YouTube 播放器使用相当宽的宽度（1100 像素宽）的布局，视频缩略图是高分辨率版本，看起来很棒。

以下是比较不同缩略图的两个链接：

窄、低质量的缩略图：http://slackrbike0.wpengine.com/ 宽、高质量的缩略图：http://slackrbike0.wpengine.com/?cat=1

有没有人遇到过缩略图质量在较小的嵌入式视频上很糟糕的问题？有没有人想出一个修复？还是我必须等待 YouTube 修复它？

这是我使用的嵌入代码，也是 YouTube 生成的默认代码：

<iframe   src="https://www.youtube.com/embed/NoIKoTs1s9Y" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

【参考方案1】：

经过反复试验，我发现将 iframe 标记中的 height 属性增加 1 会迫使 YouTube 播放器使用更高分辨率的缩略图。如果您遇到类似的问题，希望这可以为您节省一些时间...

【参考方案2】：

基本上 YT 会发送多维缩略图，如果你的容器小于 321px，那么最小的缩略图将被加载，即"width": 120,"height": 90。这是这个问题的根本原因。

width <= 320px 的元素存在隐藏缩略图问题。

我找到了一种解决方法，方法是使用min-width:321px 设置 iframe 宽度，这将强制加载更高维度的缩略图

iframe 
    min-width:321px;

希望对你有帮助。