YouTube iframe相关视频隐藏失效，求正确实现方案

嘿，我来帮你搞定这个问题！你的当前代码之所以无效，主要有两个关键原因：

原代码的问题 #

• 跨域安全限制：浏览器的同源策略禁止你通过JavaScript访问不同域名下的iframe内容（你的页面和YouTube的embed页面属于不同域），所以$("#frame_container").contents()根本无法获取到iframe内部的DOM元素，后续的CSS修改自然也不会生效。
• 不可靠的DOM操作：就算能绕过跨域限制，YouTube的UI元素类名（比如.ytp-pause-overlay ytp-scroll-min）经常会更新，依赖类名去隐藏元素的方法非常不稳定，很可能下次YouTube更新界面就失效了。

正确的解决方案：使用YouTube嵌入URL参数 #

其实YouTube官方已经提供了控制相关视频的嵌入参数，根本不需要去操作iframe内部的DOM。最核心的参数是rel=0：

修改后的完整代码 #

<!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">
    <!-- 在embed链接后添加?rel=0参数 -->
    <iframe id="frame" width="800" height="600" src="https://www.youtube.com/embed/tgbNymZ7vqY?rel=0"></iframe>
  </div>
</body>
</html>

参数说明 #

• rel=0：设置后，视频播放结束时，只会显示当前视频所属频道的相关内容，不会展示其他频道的视频。（注意：YouTube目前不再支持完全隐藏所有相关视频，但这个参数已经能满足大部分用户减少无关推荐的需求）

如果需要更精细的控制（比如隐藏视频标题、简化播放控件等），可以叠加其他官方参数：

• modestbranding=1：隐藏YouTube的logo
• iv_load_policy=3：隐藏视频内嵌的注释
• controls=1：保留播放控件（设为0则隐藏）

比如叠加后的URL可以是：
https://www.youtube.com/embed/tgbNymZ7vqY?rel=0&modestbranding=1&iv_load_policy=3

这样处理既符合浏览器安全规则，又能稳定实现你的需求，比直接操作iframe DOM靠谱多啦！

内容的提问来源于stack exchange，提问作者Ivan Makarov