如何移除YouTube API嵌入自动播放视频的弹出暂停按钮？

通过YouTube API嵌入自动播放的视频后，页面加载、切换浏览器标签或还原窗口时，会自动弹出暂停按钮（几秒后自行消失）。即使加载时鼠标在页面外，且已设置iframe的pointer-events为none，该问题仍存在。除了加载时隐藏视频再淡入的方案，是否有其他方法移除该按钮？或是这属于YouTube默认添加的、无法控制的元素？能否通过修改代码解决该问题？

使用的JavaScript代码如下：

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

window.onYouTubeIframeAPIReady = function() {
  var playerElements = document.querySelectorAll('.yt-bg-player');

  playerElements.forEach(function(el) {
    var ytId = el.getAttribute('data-yt-id');
    var playerId = el.getAttribute('id');
    var originalClasses = el.className;

    if (ytId && playerId) {
      new YT.Player(playerId, {
        videoId: ytId,
        playerVars: {
          'autoplay': 1,
          'controls': 0,
          'rel': 0,
          'playsinline': 1,
          'mute': 1,
          'disablekb': 1,
          'modestbranding': 1,
          'iv_load_policy': 3
        },
        events: {
          'onReady': function(event) {
            event.target.getIframe().className = originalClasses;
            event.target.mute();
            event.target.playVideo();
          },
          'onStateChange': function(event) {
            if (event.data === YT.PlayerState.ENDED) {
              event.target.seekTo(0);
              event.target.playVideo();
            }
          }
        }
      });
    }
  });
};

这个弹出的暂停按钮是YouTube的默认内置行为，主要是为了符合浏览器自动播放政策（如Chrome的自动播放规则）而设计的——当页面从后台切回前台时，YouTube会临时显示控件提示用户视频正在播放。目前没有官方API参数可以完全禁用该元素，但可以通过以下技巧规避其可见性，无需使用隐藏淡入的方案：

1. CSS裁剪法 #

利用父容器的overflow: hidden配合iframe的位置偏移，将临时弹出的按钮区域裁出可视范围（按钮通常位于视频中央或顶部区域）。

/* 给视频容器添加样式 */
.yt-bg-player-container {
  position: relative;
  overflow: hidden;
}
/* 偏移iframe，裁掉按钮区域 */
.yt-bg-player-container iframe {
  position: absolute;
  top: -25px; /* 根据按钮实际位置调整偏移量 */
  left: 0;
  width: 100%;
  height: calc(100% + 50px); /* 对应偏移量放大高度，保证视频内容完整显示 */
}

2. 页面焦点事件强制重置 #

监听页面可见性变化，当页面从后台切回前台时，重新触发播放并强制重置控件状态，让临时按钮快速消失。修改你的JavaScript代码如下：

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

window.onYouTubeIframeAPIReady = function() {
  var playerElements = document.querySelectorAll('.yt-bg-player');
  var players = []; // 存储所有播放器实例

  playerElements.forEach(function(el) {
    var ytId = el.getAttribute('data-yt-id');
    var playerId = el.getAttribute('id');
    var originalClasses = el.className;

    if (ytId && playerId) {
      var player = new YT.Player(playerId, {
        videoId: ytId,
        playerVars: {
          'autoplay': 1,
          'controls': 0,
          'rel': 0,
          'playsinline': 1,
          'mute': 1,
          'disablekb': 1,
          'modestbranding': 1,
          'iv_load_policy': 3,
          'enablejsapi': 1 // 明确启用JSAPI，避免兼容性问题
        },
        events: {
          'onReady': function(event) {
            event.target.getIframe().className = originalClasses;
            event.target.mute();
            event.target.playVideo();
          },
          'onStateChange': function(event) {
            if (event.data === YT.PlayerState.ENDED) {
              event.target.seekTo(0);
              event.target.playVideo();
            }
          }
        }
      });
      players.push(player);
    }
  });

  // 监听页面可见性变化，切回前台时重置播放器状态
  document.addEventListener('visibilitychange', function() {
    if (!document.hidden) {
      players.forEach(function(player) {
        if (player.getPlayerState() !== YT.PlayerState.PLAYING) {
          player.playVideo();
        }
        // 强制重置控件为隐藏状态
        player.setOption('controls', 0);
      });
    }
  });
};

3. 强化pointer-events设置 #

确保pointer-events: none的样式不会被YouTube的动态样式覆盖，直接给容器和iframe添加强制样式：

.yt-bg-player, .yt-bg-player iframe {
  pointer-events: none !important;
}

这个设置可以减少按钮的可交互性，同时可能降低浏览器/YouTube触发临时按钮的概率。

补充说明 #

目前没有官方途径可以完全移除这个临时暂停按钮，它属于YouTube为合规性设计的内置机制。以上方法都是通过规避可见性或重置状态来改善用户体验，而非彻底删除该元素。

内容的提问来源于stack exchange，提问作者Jordan Carter