“更多视频"如何?从 YouTube 嵌入中删除暂停时的叠加层?Edpuzzle 和可汗学院以某种方式做到了 [英] How can the "More videos" overlay on pause be removed from YouTube embed? Edpuzzle and Khan Academy somehow do it

问题描述

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

我看过其他类似的帖子一个或者这个一个，但没有人提到过 Edpuzzle 的事实(例如 https://edpuzzle.com/media/5e96205457b2f29037ea>) 和可汗学院能够阻止显示更多视频"(ytp-pause-overlay).

YouTube 是否有针对教育网站的例外情况?

解决方案

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

示例:可汗学院的 rel=0 会隐藏覆盖层，但不会隐藏在您的网站上.

文档说明:

<块引用>

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

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

方法一:

---

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

这是有效的，因为 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. <iframe>(和视频播放器)将替换这个 <div>标签.--><div id="玩家"></div>

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

方法二:

---

隐藏更多视频叠加层的另一种方法是对来自没有公开视频的频道的视频使用 rel=0 参数.这种方法的一个限制是视频必须来自一个频道，所有视频都不公开或不公开.

更正:似乎这种行为已经改变，现在来自没有公开视频的频道的嵌入视频将不再显示更多视频"、相关视频"和相关视频".无论嵌入中的 rel 参数如何，都覆盖.

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

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

I want to have the "More videos" overlay not show up when an embedded YouTube video is paused.

I've seen other posts like this one or this one, but none have mentioned the fact that somehow Edpuzzle (e.g. https://edpuzzle.com/media/5e96205457b2f23efd7e8903) and Khan Academy are able to prevent the "More videos" (ytp-pause-overlay) from showing.

Is there some exception from YouTube for educational sites?

解决方案

The rel parameter is what hides the More Videos overlay, but we cannot use the full feature because YouTube only allows certain sites to do so.

example: rel=0 on khan academy hides the overlay but not on your site.

What the docs state:

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.

Now that we know that we cannot hide the More Videos overlay when the user pauses with the official iFrame API. What we can do is use a more "hacky" solution.

Method 1:

---

Simply hide the top and bottom section of a player by "div cropping". A working demo can be found here. This basically hides the More Videos section but it also hides the controls, which might be undesirable.

This works because the YouTube player always centers a video, even with a really tall player. So all we have to do is make the player really tall and crop out the top and bottom.

To do the cropping we will need to wrap the iFrame with divs, so our HTML may look something like this.

<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>

Embedding a YouTube player will not work on Stack Overflow so instead of posting all the code here I used CodePen since they allow YouTube embedding.

Method 2:

---

Another method to hide the more videos overlay is to use rel=0 parameter to videos from channels with no public videos. A limitation to this method is that the videos must be from a channel with all videos unlisted or private.

correction: it seems like this behavior has changed, now embedded videos from channels with no public videos will no longer show the "more videos", "related videos" overlay regardless of the rel parameter in your embedds.

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

这篇关于“更多视频"如何?从 YouTube 嵌入中删除暂停时的叠加层?Edpuzzle 和可汗学院以某种方式做到了的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！