如何从 YouTube 嵌入中删除暂停时叠加的“更多视频”？Edpuzzle 和可汗学院以某种方式做到了

Question

我希望在嵌入的 YouTube 视频暂停时不显示“更多视频”叠加层。

我看过类似这个或这个的其他帖子，但没有人提到这样一个事实：Edpuzzle（例如https://edpuzzle.com/media/5e96205457b2f23efd7e8903）和可汗学院能够阻止“更多视频”（ytp -暂停覆盖）从显示。

YouTube 对于教育网站有什么例外吗？

Answer 1

rel 参数隐藏了“更多视频”叠加层，但我们无法使用完整功能，因为 YouTube 只允许某些网站这样做。

\n

例如：可汗学院上的 rel=0 会隐藏叠加层，但不会隐藏在您的网站上。

\n

文档说明了什么：

\n

\n

这是 showinfo 和 rel 参数的弃用公告。标题、频道信息和相关视频是 YouTube\xe2\x80\x99s 核心用户体验的重要组成部分，这些变化有助于使 YouTube 观看体验在不同平台上保持一致。

\n

\n

现在我们知道，当用户使用官方 iFrame API 暂停时，我们无法隐藏“更多视频”叠加层。我们能做的就是使用更“hacky”的解决方案。

\n

方法一：

\n\n

只需通过“div 裁剪”隐藏播放器的顶部和底部部分即可。可以在此处找到工作演示。这基本上隐藏了“更多视频”部分，但也隐藏了控件，这可能是不可取的。

\n

这是有效的，因为 YouTube 播放器始终以视频为中心，即使播放器非常高。所以我们要做的就是让玩家变得非常高，并剪掉顶部和底部。

\n

为了进行裁剪，我们需要用 div 包裹 iFrame，因此我们的 HTML 可能如下所示。\n

\r\n

\r\n

<div id="player-size" style="">\n  <div id="cropping-div" style="">\n    <div id="div-to-crop" style="">\n      <div id="player-wrapper">\n        <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->\n        <div id="player"></div>\n      </div>\n    </div>\n  </div>\n</div>

\r\n

\r\n

\r\n

\n

嵌入 YouTube 播放器在 Stack Overflow 上不起作用，因此我没有在这里发布所有代码，而是使用CodePen，因为它们允许嵌入 YouTube。

\n

方法二：

\n\n

隐藏更多视频叠加的另一种方法是对没有公共视频的频道中的视频使用 rel=0 参数。此方法的限制是视频必须来自所有视频不公开或私有的频道。

\n

更正：这种行为似乎已经改变，现在来自没有公共视频的频道的嵌入视频将不再显示“更多视频”、“相关视频”叠加层，无论嵌入中的 rel 参数如何。

\n

这是我的测试频道的播放列表，没有带有 rel=0 参数的公共视频

\n

这是我的测试通道中带有 rel=1 参数的嵌入

\n