如何实现视频全屏状态下仍显示Logo？

这个问题的核心原因很明确：浏览器的全屏API默认只会让单个元素进入全屏状态。你原来的代码如果是直接让<video>元素全屏，那作为兄弟元素的.watermark自然不会被包含进全屏上下文里，所以就看不到了。下面是具体的修复方案：

核心思路 #

让包含视频和Logo的父容器（也就是.video）整体进入全屏，这样Logo作为容器的子元素，就能跟着一起进入全屏状态，保持原本的定位和层级。

修改后的完整代码 #

1. 调整CSS样式 #

补充全屏状态下容器的样式，确保它能占满整个屏幕，同时优化Logo的交互体验：

.video { 
  position: relative; 
  display: inline-block; 
  width: 600px; 
  max-width: 60%; 
  background-color: #000;
}
.video video { 
  width: 100%; 
  object-fit: contain; 
  object-position: 50% 50%; 
}
.video .watermark { 
  position: absolute; 
  width: 15%; 
  height: 15%; 
  top: 5px; 
  left: 5px; 
  z-index: 999;
  /* 防止Logo遮挡视频控件，确保用户能正常操作视频 */
  pointer-events: none;
}
.video .watermark img { 
  width: 100%; 
  height: 100%; 
  object-fit: contain; 
  object-position: 0 0; 
}
#goFullScreen { 
  background: #fff; 
  font-size: 15px; 
  padding: 10px; 
  display: inline; 
  cursor: pointer; 
}
.fullscreen #goFullScreen { display: none; }
.video .exit { 
  position: absolute; 
  top: 10px; 
  right: 10px; 
  font-size: 13px; 
  color: #fff; 
  display: none;
  cursor: pointer;
  z-index: 1000;
}
.fullscreen .exit { display: block }

/* 新增全屏状态下的容器样式，适配不同浏览器前缀 */
.video:fullscreen,
.video:-webkit-full-screen,
.video:-moz-full-screen,
.video:-ms-fullscreen {
  width: 100vw;
  height: 100vh;
  max-width: 100%;
}

2. 调整HTML结构 #

把退出按钮放到.video容器内，确保全屏时能正常显示：

<div class="video">
  <div class="watermark">
    <img draggable="false" src="https://www.jing.fm/clipimg/full/82-824068_aperture-science-logo-png.png">
  </div>
  <video id="video" controlsList="nodownload nocaptions" controls="" preload="metadata">
    <source src="https://thepaciellogroup.github.io/AT-browser-tests/video/ElephantsDream.mp4" type="video/mp4">
  </video>
  <div class="exit" id="exitFullScreen">退出全屏</div>
</div>
<button id="goFullScreen">进入全屏</button>

3. 添加JavaScript逻辑 #

处理全屏的触发、退出，同时兼容不同浏览器的API前缀，并监听全屏状态变化：

const videoContainer = document.querySelector('.video');
const goFullScreenBtn = document.getElementById('goFullScreen');
const exitFullScreenBtn = document.getElementById('exitFullScreen');

// 触发全屏
goFullScreenBtn.addEventListener('click', () => {
  if (videoContainer.requestFullscreen) {
    videoContainer.requestFullscreen();
  } else if (videoContainer.webkitRequestFullscreen) {
    videoContainer.webkitRequestFullscreen();
  } else if (videoContainer.mozRequestFullScreen) {
    videoContainer.mozRequestFullScreen();
  } else if (videoContainer.msRequestFullscreen) {
    videoContainer.msRequestFullscreen();
  }
  videoContainer.classList.add('fullscreen');
});

// 退出全屏
exitFullScreenBtn.addEventListener('click', () => {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  }
  videoContainer.classList.remove('fullscreen');
});

// 监听全屏状态变化（比如用户按ESC退出）
document.addEventListener('fullscreenchange', () => {
  if (!document.fullscreenElement) videoContainer.classList.remove('fullscreen');
});
document.addEventListener('webkitfullscreenchange', () => {
  if (!document.webkitFullscreenElement) videoContainer.classList.remove('fullscreen');
});
document.addEventListener('mozfullscreenchange', () => {
  if (!document.mozFullScreenElement) videoContainer.classList.remove('fullscreen');
});
document.addEventListener('MSFullscreenChange', () => {
  if (!document.msFullscreenElement) videoContainer.classList.remove('fullscreen');
});

关键细节说明 #

• pointer-events: none：给Logo添加这个属性，避免它遮挡视频的播放控件，保证用户能正常操作视频。
• 多浏览器API兼容：不同浏览器对全屏API的实现有前缀差异，需要覆盖webkit、moz、ms等前缀确保兼容性。
• 全屏状态监听：除了点击退出按钮，用户可能通过ESC键退出全屏，这时候需要同步移除fullscreen类，恢复原样式。

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