如何在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“显示更多”设置中没有“隐藏相关”的选项。

- Penanghill

Answer 1

在将更多参数添加到URL时，您必须使用“&”。请使用以下内容更新src字段。

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

- Saumini Navaratnam

---

谢谢你的回答。&符号起作用了！播放列表嵌入后，最后一个视频播放完毕后不再显示相关视频。 - Penanghill

如果您的嵌入代码看起来更像这样：https://www.youtube.com/embed/FlQ3AuD2UAw，您可能需要使用?而不是&。问号后面的所有内容称为查询字符串，在第一个属性后面添加新属性时需要用＆字符分隔。因此，如果您的URL中没有?，则应该从该字符开始而不是&。 - Subtlebot

很遗憾，截至2018年9月，rel=0仅限制与您自己的频道相关的视频而不是完全禁用它们。 - Maximillian Laumeister

如何在Android中的iframe YouTube中删除/隐藏下一步和上一步按钮。 - Gyan Swaroop Awasthi

Answer 2

截至2018年9月25日，目前无法禁用相关视频的显示。

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

具体而言： - 更改之前，如果参数的值设置为0，则播放器不会显示相关视频。 - 更改后，如果rel参数设置为0，则播放器将显示与刚刚播放的视频来自同一频道的相关视频。

- Turner Bass

Answer 3

截至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>

如需获取最新的代码，包括缩小版本、描述、演示和说明，请查看我的博客文章。

- Maximillian Laumeister

---

我不确定我完全理解这段代码。你定义了一个玩家和一个函数，但是这个函数什么时候被执行呢？是在$(document).ready时加载吗？它什么时候被执行？我尝试在ready中执行它，但好像出现了构造函数类型的错误？ - anita

onYouTubeIframeAPIReady和onPlayerStateChange函数是用于YouTube API的钩子。它们作为回调函数由官方YouTube API脚本执行。它们需要在全局范围内工作，因此如果您正在包装此代码，则需要将它们分配给window对象。 - Maximillian Laumeister

我不确定我理解你如何将一个函数附加到窗口函数？我的意思是它应该已经全局可用了吧？ - anita

使用 函数声明 语法定义的函数仅在最外层作用域中全局可用，即在 <script> 标记中松散定义，而不是嵌套在另一个函数中。如果它们被嵌套，则要使它们全局可用，需要使用变量赋值显式地将它们分配给窗口对象，而不是使用函数声明语法。 - Maximillian Laumeister

嗯..我想我成功地创建了YT.Player， 问题是我无法触发事件，回调函数也没有被调用。 - anita

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没有推荐任何建议性的视频

- MRRaja

Answer 5

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

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

希望其他人也能受益。 使用 & 而不是 ? 没有起作用！

- S.Yadav

---

该功能已被弃用。现在，rel标志仅切换来自同一频道或其他相关视频。 - saurabhlahoti

Answer 6

正如大家所提到的，rel=0不再起作用了，是的，他们是正确的，但我目前使用的有一个技巧。

Youtube播放器需要一定高度的播放器才能显示“相关/更多视频”部分，因此如果您将高度保持在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>

请注意，这个技巧可以在您暂停/播放视频时隐藏该部分内容，但当视频结束时，您仍然会看到它。

- Ankur Arora

Answer 7

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

- Naved Khan

---

虽然这段代码可能回答了问题，但您是否可以考虑添加一些解释来说明您解决的问题是什么以及如何解决它？这将有助于未来的读者更好地理解您的答案并从中学习。 - dan1st