youtube iframe api参数rel = 0不起作用

Question

我需要在观看视频后隐藏相关视频.我订了rel=0,但它不起作用.我正在使用此页面进行测试.rel观看视频后,复选框值不会影响显示的相关视频.

它在谷歌浏览器中不起作用.在Mozilla Firefox中,它可以正常工作.

Answer 1

截至2018年9月25日,您无法禁用相关视频.相反,如果rel参数设置为0,则相关视频将来自与刚刚播放的视频相同的频道. YouTube API

Answer 2

自 2018 年 9 月起，YouTube更改了该rel=0参数，以便不再完全禁用相关视频。

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

有关缩小的代码以及进一步的描述、详细信息和说明，请查看我关于该主题的博客文章。

Answer 3

这是因为您很可能登录的是 Chrome 浏览器，而不是 Firefox 浏览器。

&rel=0仅在未登录时有效。但是，您可以使用增强隐私模式来解决此问题：

https://www.youtube-nocookie.com/embed/[id]?rel=0

Answer 4

用 Chrome 和 Opera 都检查过了，它有效。

https://jsfiddle.net/o8ztczn6/

<iframe width="560" height="315" src="https://www.youtube.com/embed/6UVZpQ8cLSQ?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

完成后没有显示相关视频。