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

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

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

我在YouTube上看到了模糊的“坏视频”屏幕（对不起，我不知道这个技术术语）

---

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

向url添加更多参数时，必须使用“&”。使用以下命令更新src字段

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

---

我又传递了一个参数作为

“？rel=0”

，以停止相关视频。
这对我很有用，因为-

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

希望也可能对其他人有用。

&

而不是

？

不起作用

到目前为止，无法禁用相关视频的显示

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

更具体地说：

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

自2018年9月起，使用

rel=0

增加了YouTube的重点

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

#游乐园{
显示：内联块；
位置：相对位置；
}
#playerRap.show:：after{
内容：“；
位置：绝对位置；
排名：0；
左：0；
底部：0；
右：0；
光标：指针；
背景色：黑色；
背景重复：无重复；
背景位置：中心；
背景尺寸：64px 64px；
背景图片：url（数据：image/svg+xml；utf8；base64，phn2zyb4bwxucz0iahr0cdovl3dy53my5vcmcvmjawmc9zdmciihdpzhropzhropsixmjgIgIgIg2awv3qm94psiwidAgnitewiduxMCi+phbhdggzd0itti1nsaxmjUnsaxmJunsayntug1vxlje2m4nc4xNsWide1yacy2Oc4Oc44nsaxMtUzmTgUzmid1d1djg0jg1djg0djgIg0djgIgIg4djgIgIg4djgIgIdjzmWzmWdjg4djg4djzmWzmWzmWzmWzmWC05MS44LTIWNC0YMDQTMJA0EIIGZMLSBD0II0ZGRIIIVPJWVC3ZNPG==）；
}
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（标记，firstScriptTag）；
var播放器；
函数onyoutubeiframeapiredy（）{
玩家=新的YT玩家（玩家框架{
videoId:'M7lc1UVf VE'，
活动：{
“onStateChange”：onPlayerStateChange
}
});
}
函数onPlayerStateChange（事件）{
如果（event.data==YT.PlayerState.end）{
document.getElementById（“playerRap”）.classList.add（“显示”）；
}
}
document.getElementById（“playerRap”）.addEventListener（“单击”，函数（）{
播放器。seekTo（0）；
document.getElementById（“playerRap”）.classList.remove（“显示”）；
});

获取最新的代码，包括缩小版、说明、演示和说明。

---

到2020年，我的代码开始工作

---

在此嵌入视频中没有Youtube建议的任何视频

谢谢您的回答。

&

有效！播放列表嵌入在播放最后一个视频后不再显示相关视频。如果您的嵌入看起来更像这样：

https://www.youtube.com/embed/FlQ3AuD2UAw

您可能需要使用

？

而不是

&

。在

？

之后的所有内容都称为查询字符串，第一个属性之后的新属性由

&

字符分隔。因此，如果URL中没有

？

，您将从中开始，而不是

&

。不幸的是，截至2018年9月，

rel=0

，我不确定是否理解您定义了一个播放器和函数，但是函数什么时候执行？when$（文档）.ready？加载？何时执行？我试图在on ready中执行，但似乎在这种类型的构造函数中出现错误。

OnYouTubeiFrameAPReady

和

onPlayerStateChange

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

窗口

对象。我不确定您将如何将函数附加到窗口函数？我的意思是它应该已经全局可用？使用函数声明语法定义的@anita函数只有在outerm中时才全局可用ost作用域，即在

标记中松散，没有嵌套在另一个函数中。如果它们是嵌套的，那么为了全局可用，它们需要使用变量赋值显式地分配给窗口对象，而不是使用函数声明语法。嗯……我想我已经正确地创建了YT.Player，问题是我我不能触发事件，回调函数没有被调用。这已经被否决了。Rel旗现在只从同一频道或其他频道切换相关视频，而这个代码可能会回答这个问题，你能考虑为你解决的问题添加一些解释，以及你是如何解决的？这将有助于未来的ReA。我想更好地理解你的答案并从中学习。好的，我可以理解，但如果有人知道编码，那么他就试着点击，然后再试一次，它会正常工作，你也可以试一下

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

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