如何移除网站中YouTube嵌入视频的暂停推荐及结束页相关视频（类：ytp-pause-overlay）

嘿，我之前也碰到过这个糟心的问题！YouTube嵌入播放器默认的暂停/结束推荐列表确实会干扰用户体验，尤其是在自己的网站上想保持用户注意力的时候。下面是几个经过验证的解决方案，从最官方可靠的到备用的hack都有：

一、优先用官方嵌入参数（最简单稳定） #

别一开始就想着用CSS/JS hack，YouTube本身就提供了参数来控制这些推荐元素，这是最靠谱的方式——毕竟他们的UI结构随时可能变，官方参数是长期受支持的。

你现在的iframe URL是：

<iframe title="Dummy Video" src="https://www.youtube.com/embed/dummyvideo?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" name="dummyvideo"></iframe>

给src里加几个关键参数：

• rel=0：视频结束时，只会显示同一上传者的视频（而不是全网乱推的内容，这是目前官方能做到的最接近“完全隐藏推荐”的设置，因为YouTube早就不支持彻底关掉结束推荐了，但限制到同一频道已经好很多）
• modestbranding=1（可选）：把播放器上的YouTube logo藏起来，减少干扰
• iv_load_policy=3（可选）：关掉视频里的注释气泡，界面更干净
• enablejsapi=1：这个是后面用JS控制的前提，如果打算用API的话必须加

修改后的URL示例：

<iframe title="Dummy Video" src="https://www.youtube.com/embed/dummyvideo?feature=oembed&rel=0&modestbranding=1&iv_load_policy=3&enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" name="dummyvideo"></iframe>

二、用YouTube IFrame API实现完全控制（推荐进阶） #

如果上面的参数还满足不了你（比如想彻底干掉暂停时的那个overlay），那就用官方的IFrame Player API，它能让你通过JS完全掌控播放器的一举一动，包括监听暂停、结束事件，精准隐藏对应的UI元素。

步骤1：在页面里加API脚本 #

把这段代码放到你的页面底部（或者<head>里也行）：

<script>
  // 加载YouTube的API脚本
  const tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  const firstScript = document.querySelector('script');
  firstScript.parentNode.insertBefore(tag, firstScript);

  // 存所有播放器实例，方便批量控制
  let players = [];

  // API加载完成后会自动调用这个函数
  function onYouTubeIframeAPIReady() {
    // 找到页面里所有YouTube嵌入的iframe
    const iframes = document.querySelectorAll('iframe[src*="youtube.com/embed"]');
    iframes.forEach((iframe, index) => {
      // 给每个iframe创建播放器实例，没有ID的话自动生成一个
      const player = new YT.Player(iframe.id || `youtube-player-${index}`, {
        events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange
        }
      });
      players.push(player);
    });
  }

  // 播放器准备好时的回调，可以加一些默认设置
  function onPlayerReady(event) {
    // 比如静音（可选，根据你的需求来）
    // event.target.mute();
  }

  // 监听播放器状态变化
  function onPlayerStateChange(event) {
    const player = event.target;
    const iframe = player.getIframe();

    // 暂停的时候
    if (event.data === YT.PlayerState.PAUSED) {
      hidePauseOverlay(iframe);
    }
    // 视频结束的时候
    if (event.data === YT.PlayerState.ENDED) {
      hideEndscreen(iframe);
      // 可选：把视频拉回开头，方便用户重新播放
      player.seekTo(0);
      player.pauseVideo();
    }
  }

  // 隐藏暂停overlay的函数
  function hidePauseOverlay(iframe) {
    // 通过postMessage给iframe发指令，官方支持的方式
    iframe.contentWindow.postMessage(JSON.stringify({
      event: "command",
      func: "hidePauseOverlay",
      args: []
    }), '*');
  }

  // 隐藏结束推荐屏幕的函数
  function hideEndscreen(iframe) {
    iframe.contentWindow.postMessage(JSON.stringify({
      event: "command",
      func: "hideEndscreen",
      args: []
    }), '*');
  }
</script>

步骤2：给iframe加个ID（可选但推荐） #

为了更好地识别每个播放器，给每个iframe加个唯一ID会更稳妥：

<iframe id="youtube-player-1" title="Dummy Video" src="https://www.youtube.com/embed/dummyvideo?feature=oembed&rel=0&enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" name="dummyvideo"></iframe>

三、CSS备用方案（仅当API用不了时） #

先提醒一下：正常情况下，跨域的iframe内容是不能用父页面的CSS直接控制的，因为浏览器的同源策略限制。你之前的CSS能生效一部分，可能是巧合或者YouTube的特殊设置，但这个方法非常脆弱，随时可能失效。

如果你能把CSS注入到iframe内部（比如用用户脚本，或者你的网站有特殊的嵌入方式），可以试试这个：

/* 彻底隐藏暂停时的推荐overlay */
.ytp-pause-overlay {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 隐藏结束时的推荐屏幕 */
.ytp-endscreen-content {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

四、修复你之前的JS问题 #

你之前的JS报错，是因为元素还没加载出来，而且跨域限制你根本访问不到iframe内部的DOM元素！直接用getElementsByClassName肯定不行的。如果实在不想用API，非要用原生JS，那可以试试MutationObserver监听iframe内部的变化，但这个方法非常脆弱，YouTube改个类名就失效了，仅作备用：

// 监听每个YouTube iframe加载完成
document.querySelectorAll('iframe[src*="youtube.com/embed"]').forEach(iframe => {
  iframe.addEventListener('load', () => {
    try {
      // 尝试获取iframe内部的文档（跨域的话会报错，所以用try-catch）
      const doc = iframe.contentDocument || iframe.contentWindow.document;
      // 创建观察者，监听DOM变化
      const observer = new MutationObserver(mutations => {
        mutations.forEach(mutation => {
          // 找暂停overlay
          const pauseOverlay = doc.querySelector('.ytp-pause-overlay');
          if (pauseOverlay) pauseOverlay.style.display = 'none';
          // 找结束屏幕
          const endscreen = doc.querySelector('.ytp-endscreen-content');
          if (endscreen) endscreen.style.display = 'none';
        });
      });
      // 监听整个body的变化
      observer.observe(doc.body, { childList: true, subtree: true });
    } catch (e) {
      console.error('跨域限制，无法访问iframe内容:', e);
    }
  });
});

还是那句话，这个方法不推荐，能用API就用API。

内容的提问来源于stack exchange，提问作者Mohammad Umar