在 youtube iframe 中隐藏相关视频答案

【问题标题】：Hide related videos in youtube iframe在 youtube iframe 中隐藏相关视频
【发布时间】：2020-06-30 09:53:22
【问题描述】：

我正在尝试隐藏相关视频（youtube iframe），但它似乎不起作用。

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>

<div id = "frame_container">
<iframe id="frame" width="800" height="600" src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
<button onclick="hide_related()">Hide</button>
</div>

<script>
    function hide_related(){
        $("#frame_container").contents().find(".ytp-pause-overlay ytp-scroll-min").css("display", "none");
    }
</script>
</body>
</html>

【问题讨论】：

您在 ID 上缺少标签，还有，DOM 中的相关视频在哪里？问题可能来自.contents() 仅查看元素的直接子代，在这种情况下是frame_container 的直接子代。
这个问题可能需要jquery标签。
查看我的另一个答案，这对您有很大帮助。 here

标签： javascript html iframe youtube-api

【解决方案1】：

您缺少 jQuery 选择器上的主题标签，它应该是 `$("#frame_container)。

另外，.contents() 函数只查看获得的 jQuery 对象的 immediate 子对象。

来自jQuery documentation：

给定一个表示一组 DOM 元素的 jQuery 对象，.contents() 方法允许我们在 DOM 树中搜索这些元素的直接子元素，并从匹配的元素构造一个新的 jQuery 对象。

<div id = "frame-container">
  <iframe id="frame" width="800" height="600" 
    src="https://www.youtube.com/embed/tgbNymZ7vqY">
  </iframe>
  <button onclick="hide_related()">Hide</button>
</div>

<script>
  function hide_related() {
    $("#frame-container").find(".ytp-pause-overlay ytp-scroll-min")
      .css("display", "none");
  }
</script>

【讨论】：