“更多视频"如何从 YouTube 嵌入中删除暂停覆盖?Edpuzzle 和可汗学院以某种方式做到了 [英] How can the "More videos" overlay on pause be removed from YouTube embed? Edpuzzle and Khan Academy somehow do it
问题描述
我希望在嵌入的 YouTube 视频暂停时不显示更多视频"叠加层.
I want to have the "More videos" overlay not show up when an embedded YouTube video is paused.
我看过其他类似的帖子一个或者这个 一个，但没有人提到 Edpuzzle(例如 https://edpuzzle.com/media/5e96205457b2f23efd7e8903) 和可汗学院能够阻止显示更多视频"(ytp-pause-overlay).
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.
YouTube 是否有一些教育网站的例外情况?
Is there some exception from YouTube for educational sites?
推荐答案
rel 参数是隐藏更多视频叠加层的原因，但我们不能使用完整的功能，因为 YouTube 只允许某些网站这样做.
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.
示例:khan academy 上的 rel=0 隐藏叠加层，但不在您的网站上.
example: rel=0 on khan academy hides the overlay but not on your site.
文档说明了什么:
这是 showinfo 和 rel 参数的弃用公告.标题、频道信息和相关视频是 YouTube 核心用户体验的重要组成部分，这些变化有助于使不同平台的 YouTube 观看体验保持一致.
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"的方法.解决方案.
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.
方法一:
通过div 裁剪"简单地隐藏播放器的顶部和底部.这里可以找到一个工作演示.这基本上隐藏了更多视频部分，但它也隐藏了控件，这可能是不可取的.
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.
之所以有效，是因为 YouTube 播放器始终将视频居中，即使播放器非常高.所以我们所要做的就是让玩家变得非常高，并剪掉顶部和底部.
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.
要进行裁剪，我们需要用 div 包裹 iFrame，因此我们的 HTML 可能看起来像这样.
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>嵌入 YouTube 播放器无法在 Stack Overflow 上运行，因此我没有在此处发布所有代码，而是使用 CodePen因为它们允许嵌入 YouTube .
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.
方法二:
隐藏更多视频叠加层的另一种方法是使用 rel=0 参数来处理来自没有公开视频的频道的视频.此方法的一个限制是视频必须来自所有视频不公开或私有的频道.
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.
更正:这种行为似乎已经改变，现在来自没有公开视频的频道的嵌入视频将不再显示更多视频"、相关视频"；覆盖而不考虑嵌入中的 rel 参数.
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.
这篇关于“更多视频"如何从 YouTube 嵌入中删除暂停覆盖?Edpuzzle 和可汗学院以某种方式做到了的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
