隐藏相关视频 Youtube Iframe API

Question

我正在尝试隐藏 相关视频，当您暂停视频时会显示这些视频，但我从类似问题中发现 2018 年 9 月 25 日 无法禁止显示相关视频。

The effect of the change is that you will not be able to disable related videos. However, you will have the option of specifying that the related videos shown in the player should be from the same channel as the video that was just played.

To be more specific:

Prior to the change, if the parameter's value is set to 0, then the player does not show related videos. After the change, if the rel parameter is set to 0, the player will show related videos that are from the same channel as the video that was just played.

这里是 JSFiddle.

此外，用于隐藏视频标题、稍后观看按钮和分享按钮的参数 showinfo=0 也不再起作用。 自 2018 年 9 月 25 日起已弃用，但不知何故 KhanAcademy 仍然能够隐藏那些包括相关视频的内容。他们使用不同的 API 吗？

像可汗学院那样完全隐藏相关视频或在顶部叠加缩略图以隐藏相关视频对我来说都行。

Answer 1

自 2018 年 9 月 25 日起，youtube 已更改 API。因此，您不能禁用相关视频，但可以指定可以显示的列表。 https://developers.google.com/youtube/player_parameters#rel

我已经尝试了下面提供的所有可能答案您可以在此处尝试代码：https://jsfiddle.net/ibrth/0zx7o6rs/62/ and https://jsfiddle.net/ibrth/z9tk1q3r/

function onYouTubeIframeAPIReady() {
    player = new YT.Player('video-placeholder', {
        width: 600,
        height: 400,
        videoId: '0sDg2h3M1RE',
        playerVars: {
            color: 'white',
            playlist: 'taJ60kskkns,FG0fTKAqZ5g',
            rel:0,
            enablejsapi:1,
            modestbranding: 1, showinfo: 0, ecver: 2
        },
        events: {
            onReady: initialize
        }
    });
}

我在这里找到了答案：

Youtube Javascript API - disable related videos 和
https://webmasters.stackexchange.com/questions/102974/how-to-remove-the-related-videos-at-end-of-youtube-embedded-video

Answer 2

所以我找到了一个开源播放器，它确实隐藏了所有相关视频，包括标题、分享和稍后观看按钮。

玩家名字是Plyr.

HTML:

<div class="plyr__video-embed" id="player">
    <iframe src="https://www.youtube.com/embed/9C1leq--_wM??origin=https://plyr.io&amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1" allowfullscreen allowtransparency allow="autoplay"></iframe>
</div>

你可以初始化它：

const player = new Plyr('#player', {});

// Expose player so it can be used from the console
window.player = player;

CSS 隐藏相关视频：

.plyr__video-embed iframe {
    top: -50%;
    height: 200%;
}

这是 JSFiddle。它非常适合我。

隐藏相关视频 Youtube Iframe API

Hide related videos Youtube Iframe API

javascript

youtube-iframe-api