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

Posted 2023-02-24

【中文标题】如何在 YouTube 播放列表嵌入代码的末尾隐藏相关视频？

【英文标题】：How do I hide related videos at the end of a YouTube playlist embed code?

【发布时间】：2016-07-19 04:57:37

【问题描述】：

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

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

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

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

我得到“坏视频”模糊的 YouTube 屏幕（抱歉，我不知道这个的技术术语）！

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

【参考方案1】：

在向 url 添加更多参数时，您必须使用 '&'。使用以下内容更新 src 字段。

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

【讨论】：

感谢您的回答。 & 工作！播放最后一个视频后，嵌入的播放列表不再显示相关视频。

如果您的嵌入看起来更像这样：https://www.youtube.com/embed/FlQ3AuD2UAw，您可能需要使用? 而不是&。 ? 之后的所有内容都称为查询字符串，第一个属性之后的新属性由& 字符分隔。因此，如果您的 URL 中没有 ?，那么您将使用它而不是 &。

不幸的是，截至 2018 年 9 月，rel=0only restricts related videos to your own channel rather than fully disabling them.

【参考方案2】：

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

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

希望也适用于其他人。 & 代替 ? 不起作用！

【讨论】：

这已被弃用。 rel 标志现在只切换来自同一频道或其他频道的相关视频

【参考方案3】：

截至September 25th 2018，无法禁用相关视频的显示。

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

更具体：

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

^强调

【参考方案4】：

截至 2018 年 9 月，YouTube prevents hiding related videos 使用 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
             
            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。

【讨论】：

我不确定我是否完全理解这段代码。你定义了一个播放器和函数，但是函数什么时候执行？什么时候 $(document).ready？负载？什么时候执行？我试着在准备好的时候做，但是这种类型的构造函数似乎出错了？

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

不确定我是否理解您将如何将函数附加到窗口函数？我的意思是它应该已经在全球范围内可用了？

@anita 使用函数声明语法定义的函数只有在最外层范围内才全局可用，即在<script>标签中松散，不嵌套在另一个范围内功能。如果它们是嵌套的，那么为了全局可用，它们需要使用变量分配显式分配给窗口对象，而不是使用函数声明语法。

hmm.. 我认为我成功地创建了 YT.Player，问题是我无法触发事件，并且回调函数不会被调用。

【参考方案5】：

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

【讨论】：

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

【参考方案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 推荐的任何推荐视频

【参考方案7】：

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

Youtube 播放器需要一定的播放器高度才能显示“相关/更多视频”部分，所以如果您设法将高度保持在 250px 以下，那么它就可以工作。

以下嵌入代码有效，因为高度为 250 像素，而 Youtube 播放器没有为我显示该部分。

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

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