如何禁用全屏模式下YouTube嵌入播放器的分享按钮？

当YouTube播放器通过element.requestFullscreen进入全屏时，它会处于浏览器的全屏顶层上下文，普通fixed定位元素哪怕z-index再高也无法覆盖——因为不在同一个全屏栈里。要解决这个问题，核心是让遮罩元素也跟随播放器进入全屏状态。

实现步骤 #

• 监听播放器的全屏切换事件，同步控制遮罩元素的全屏状态
• 确保遮罩在全屏时的定位和层级正确

完整代码示例 #

HTML

<div class="youtube-container">
  <iframe id="youtube-player" src="https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0" frameborder="0"></iframe>
  <div class="youtube-icon"></div>
</div>

CSS

.youtube-container {
  position: relative;
  width: 800px;
  height: 450px;
}

#youtube-player {
  width: 100%;
  height: 100%;
}

.youtube-icon {
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 80px;
  z-index: 999;
  /* 可选：添加半透明背景方便调试定位 */
  /* background: rgba(255,0,0,0.3); */
}

/* 兼容各浏览器的全屏状态样式 */
.youtube-icon:fullscreen,
.youtube-icon:-webkit-full-screen,
.youtube-icon:-moz-full-screen,
.youtube-icon:-ms-fullscreen {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 80px;
  height: 80px;
  z-index: 999999;
}

JavaScript

const player = document.getElementById('youtube-player');
const mask = document.querySelector('.youtube-icon');

// 监听全屏切换事件（兼容各浏览器前缀）
document.addEventListener('fullscreenchange', handleFullscreenChange);
document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
document.addEventListener('mozfullscreenchange', handleFullscreenChange);
document.addEventListener('msfullscreenchange', handleFullscreenChange);

function handleFullscreenChange() {
  const isFullscreen = document.fullscreenElement || 
                       document.webkitFullscreenElement || 
                       document.mozFullScreenElement || 
                       document.msFullscreenElement;
  
  if (isFullscreen === player) {
    // 播放器进入全屏，同步让遮罩进入全屏
    if (mask.requestFullscreen) {
      mask.requestFullscreen();
    } else if (mask.webkitRequestFullscreen) {
      mask.webkitRequestFullscreen();
    } else if (mask.mozRequestFullScreen) {
      mask.mozRequestFullScreen();
    } else if (mask.msRequestFullscreen) {
      mask.msRequestFullscreen();
    }
  } else {
    // 播放器退出全屏，同步退出遮罩的全屏状态
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
  }
}

关键说明 #

1. 全屏上下文同步：只有当遮罩元素也进入全屏模式时，才能和YouTube播放器处于同一层级栈，实现有效覆盖。
2. 浏览器兼容性：必须处理不同浏览器的全屏API前缀（如webkit、moz、ms），确保全平台生效。
3. 定位微调：可以根据实际页面中YouTube分享按钮的位置，调整全屏状态下遮罩的top/right值，确保完全覆盖按钮区域。

内容的提问来源于stack exchange，提问作者Gabriel Beauchemin-Dauphinais