如何在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>

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

播放列表的YouTube“SHOW MORE”设置中没有“隐藏相关”选项。

Answer 1

在向网址添加更多参数时，您必须使用“＆”。使用以下更新src字段。

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

Answer 2

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

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

更具体：

• 在更改之前，如果参数的值设置为0，则播放器不会显示相关视频。
• 更改后，如果rel参数设置为0，播放器将显示与刚刚播放的视频相同频道的相关视频。

更加强调

Answer 3

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

但是，您可以使用YouTube播放器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

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

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

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