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>

我收到了“糟糕的视频”模糊的YouTube屏幕（对不起，我不知道这个技术术语）！

播放列表的YouTube“显示更多”设置中没有“隐藏相关”选项。

Answer 1

你必须使用＆＃39;＆amp;＆＃39;在向网址添加更多参数时。使用以下更新src字段。

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

Answer 2

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

更改的结果是您将无法禁用相关视频。 但是，您可以选择指定播放器中显示的相关视频应与刚刚播放的视频来自同一频道。

更具体地说：


在更改之前，如果参数的值设置为0，则播放器不会显示相关视频。

更改后，如果rel参数设置为0，则播放器将显示与刚播放的视频来自同一频道的相关视频。

^{增加了重点}

Answer 3

截止到2018年9月，使用rel=0的YouTube prevents hiding related videos。

但是，您可以通过使用YouTube Player API来显示自定义HTML而不是相关视频来解决此问题。

以下是一些示例代码，该视频在制作完成后会在视频上显示自定义的“重播”按钮，从而隐藏相关视频：

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

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

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

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

希望也可能对其他人有用。 &代替?无效！

Answer 6

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

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

6 个答案: