如何从 YouTube 嵌入中删除暂停时的 "More videos" 叠加层? Edpuzzle 和可汗学院以某种方式做到了

How can the "More videos" overlay on pause be removed from YouTube embed? Edpuzzle and Khan Academy somehow do it

我想让 "More videos" 叠加层在嵌入的 YouTube 视频暂停时不显示。

我看过其他类似的帖子 one or this one, but none have mentioned the fact that somehow Edpuzzle (e.g. https://edpuzzle.com/media/5e96205457b2f23efd7e8903) 并且可汗学院能够阻止 "More videos" (ytp-pause-overlay) 显示。

YouTube 的教育网站是否有一些例外?

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

示例:可汗学院上的 rel=0 隐藏叠加层,但您的网站上没有。

文档说明了什么:

This is a deprecation announcement for the showinfo and rel parameter. Titles, channel information, and related videos are an important part of YouTube’s core user experience, and these changes help to make the YouTube viewing experience consistent across different platforms.

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

方法一:


通过“div 裁剪”简单地隐藏播放器的顶部和底部部分。可以找到工作演示 here。这基本上隐藏了更多视频部分,但它也隐藏了控件,这可能是不受欢迎的。

之所以可行,是因为 YouTube 播放器始终将视频居中,即使播放器非常高大也是如此。所以我们所要做的就是让玩家真的很高并裁掉顶部和底部。

要进行裁剪,我们需要用 div 包裹 iFrame,因此我们的 HTML 可能看起来像这样。

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

嵌入 YouTube 播放器将无法在 Stack Overflow 上运行,因此我没有在此处发布所有代码,而是使用了 CodePen since they allow YouTube embedding

方法二:


另一种隐藏更多视频覆盖的方法是对来自没有public个视频的频道的视频使用rel=0参数。此方法的一个限制是视频必须来自所有视频都未列出或私有的频道。

更正:似乎此行为已更改,现在来自没有 public 视频的频道的嵌入视频将不再显示“更多视频”、“相关视频”叠加层,无论您的 rel 参数如何嵌入。

Here's a playlist from my test channel with no public videos with rel=0 parameter

Here's an embed from my test channel with the rel=1 parameter