如何在 YouTube 播放列表嵌入代码的末尾隐藏相关视频？

Question

我正在使用此代码嵌入播放列表：

<iframe width="816" height="459"     
  src="https://www.youtube.com/embed/videoseries?list=xxx" 
  frameborder="0" allowfullscreen="">

要隐藏相关视频，通常我会添加 ?rel=0（这是在单个视频嵌入的情况下），但如果我在这里尝试：

<iframe width="816" height="459" src="https://www.youtube.com/embed/videoseries?list=PL4Zkb_7gMrOzZlVy7jIeCjwScavYp6ssm?rel=0" 
 frameborder="0" allowfullscreen="">
 </iframe>

我得到 "bad video" 模糊的 YouTube 屏幕（抱歉，我不知道这个的技术术语）！

播放列表的 YouTube "SHOW MORE" 设置中没有 "hide related" 选项。

Answer 1

向 url 添加更多参数时必须使用“&”。使用以下内容更新 src 字段。

"https://www.youtube.com/embed/videoseries?list=PL4Zkb_7gMrOzZlVy7jIeCjwScavYp6ssm&rel=0"

Answer 2

我又传递了一个参数'?rel=0'来停止相关视频。
这对我有用 -

'https://www.youtube.com/embed/'+someValiable_of_video_link+'?rel=0';

希望也可能对其他人有用。 & 而不是 ? 不起作用！

Answer 3

从 September 25th 2018 开始，无法禁止显示相关视频。

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.

^添加重点

Answer 4

YouTube prevents hiding related videos 使用 rel=0 截至 2018 年 9 月。

但是，您可以解决此问题，方法是使用 YouTube 播放器 API 显示自定义 HTML 而不是相关视频。

下面是一些示例代码，它会在视频完成后在视频上方显示自定义 "replay" 按钮，从而隐藏相关视频：

<style>
    #playerWrap {
        display: inline-block;
        position: relative;
    }
    #playerWrap.shown::after {
        content:"";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        cursor: pointer;
        background-color: black;
        background-repeat: no-repeat;
        background-position: center; 
        background-size: 64px 64px;
        background-image: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4IiB2aWV3Qm94PSIwIDAgNTEwIDUxMCI+PHBhdGggZD0iTTI1NSAxMDJWMEwxMjcuNSAxMjcuNSAyNTUgMjU1VjE1M2M4NC4xNSAwIDE1MyA2OC44NSAxNTMgMTUzcy02OC44NSAxNTMtMTUzIDE1My0xNTMtNjguODUtMTUzLTE1M0g1MWMwIDExMi4yIDkxLjggMjA0IDIwNCAyMDRzMjA0LTkxLjggMjA0LTIwNC05MS44LTIwNC0yMDQtMjA0eiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==);
    }
</style>
<div>
    <div id="playerWrap">
        <iframe
            width="640" height="360"
            src="https://www.youtube.com/embed/0sDg2h3M1RE?enablejsapi=1"
            frameborder="0"
        ></iframe>
    </div>
</div>
<script>
  var playerFrame = document.currentScript.previousElementSibling.children[0].children[0];

  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player(playerFrame, {
      videoId: 'M7lc1UVf-VE',
      events: {
        'onStateChange': onPlayerStateChange
      }
    });
  }

  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.ENDED) {
        document.getElementById("playerWrap").classList.add("shown");
    }
  }

  document.getElementById("playerWrap").addEventListener("click", function() {
    player.seekTo(0);
    document.getElementById("playerWrap").classList.remove("shown");
  });
</script>

要获得最新的代码，包括缩小版本、描述、演示和说明，view my blog post on the subject。

Answer 5

<iframe src="https://www.youtube.com/embed/0CtKuSHHPI4?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Answer 6

2020 年我的代码开始工作 <iframe src="https://www.youtube.com/embed/J1djNpVf4Ew?rel=0&enablejsapi=1" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen;"></iframe>

此嵌入视频中没有 Youtube 推荐的任何推荐视频

Answer 7

正如每个人都提到的，rel=0 不再有效，是的，他们是对的，但我目前使用了一个技巧。

Youtube 播放器需要一定的播放器高度才能显示 'related/more videos' 部分，因此如果您设法将高度保持在 250px 以下，那么它就可以工作。

下面的嵌入代码有效，因为高度是 250px，而 Youtube 播放器没有为我显示该部分。

<iframe width="490" height="250" src="https://www.youtube-nocookie.com/embed/RDWKxDgZfz8?controls=0&rel=0&enablejsapi=1" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen;"></iframe>

另请注意，此技巧可以在您 pause/play 视频时隐藏该部分，当视频结束时您仍会看到该部分。

如何在 YouTube 播放列表嵌入代码的末尾隐藏相关视频？

How do I hide related videos at the end of a YouTube playlist embed code?

embed

youtube

video

iframe

playlist