如何在HTML的iframe全屏视频中添加固定居中水印

核心问题根源 #

全屏模式下浏览器会给视频元素注入默认的用户代理样式（user agent styles），同时iframe的上下文切换会改变元素的定位参考，导致水印的position、margin等属性被干扰，最终出现移位、遮挡或缩放异常。

解决方案实现 #

以下是经过验证的代码方案，覆盖样式重置、定位逻辑和全屏事件监听，确保水印在正常和全屏模式下都稳定居中：

1. iframe内部HTML结构

<div class="video-container">
  <video id="targetVideo" controls>
    <source src="your-video-source.mp4" type="video/mp4">
  </video>
  <!-- 水印元素 -->
  <div class="watermark">自定义水印</div>
</div>

2. 关键CSS样式

/* 全局重置，清除浏览器默认边距和内边距 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.video-container {
  position: relative;
  width: 100%;
  height: 100vh; /* 容器占满iframe视口 */
  overflow: hidden;
}

#targetVideo {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 保持视频比例，避免拉伸变形 */
}

/* 水印基础样式 */
.watermark {
  position: fixed; /* 基于视口定位，不受容器上下文变化影响 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 精准居中，不受元素尺寸影响 */
  z-index: 9999; /* 最高层级，防止被视频或其他元素遮挡 */
  color: rgba(255, 255, 255, 0.6);
  font-size: 24px;
  pointer-events: none; /* 不干扰视频的点击、播放等交互 */
  /* 强制覆盖浏览器默认样式 */
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* 覆盖全屏状态下视频的默认样式 */
video:fullscreen,
video:-webkit-full-screen,
video:-moz-full-screen,
video:-ms-fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 全屏状态下水印的兼容处理 */
:fullscreen .watermark,
:-webkit-full-screen .watermark,
:-moz-full-screen .watermark,
:-ms-fullscreen .watermark {
  position: fixed !important;
  z-index: 9999 !important;
  transform: translate(-50%, -50%) !important;
}

3. JavaScript全屏监听逻辑

const video = document.getElementById('targetVideo');
const watermark = document.querySelector('.watermark');

// 监听所有浏览器内核的全屏切换事件
const fullscreenEvents = [
  'fullscreenchange',
  'webkitfullscreenchange',
  'mozfullscreenchange',
  'MSFullscreenChange'
];

fullscreenEvents.forEach(event => {
  document.addEventListener(event, handleFullscreenChange);
});

function handleFullscreenChange() {
  const isFullscreen = document.fullscreenElement || 
                       document.webkitFullscreenElement || 
                       document.mozFullScreenElement || 
                       document.msFullscreenElement;
  
  if (isFullscreen) {
    // 全屏时强制锁定水印的核心样式，防止被浏览器覆盖
    watermark.style.position = 'fixed';
    watermark.style.zIndex = '9999';
    watermark.style.transform = 'translate(-50%, -50%)';
  }
}

// 可选：自定义全屏触发逻辑（如果不需要默认控件的话）
// video.addEventListener('click', () => {
//   if (!document.fullscreenElement) {
//     video.requestFullscreen().catch(err => console.error('全屏请求失败:', err));
//   } else {
//     document.exitFullscreen();
//   }
// });

关键注意事项 #

• 优先使用position: fixed而非absolute：全屏模式下视频容器的定位上下文会变化，fixed基于视口定位更稳定
• transform: translate(-50%, -50%)是最可靠的居中方案，不会因水印文字长度或元素尺寸改变偏移
• pointer-events: none必须添加，否则水印会拦截视频的交互事件
• 用!important强制覆盖浏览器的用户代理样式，解决全屏时的默认边距/内边距干扰

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