本文详解如何让自定义 html 测验元素（如 #affiche）在 vimeo 视频进入原生全屏模式后仍能正确显示于视频上方，解决因 iframe 沙箱隔离与 vimeo 全屏 dom 重构导致的 z-index 失效问题。

在嵌入 Vimeo 视频时，通过 css 定位将 html 测验层（如

// 启用自定义全屏 document.getElementById('btnFullScreen').addEventListener('click', () => {   const container = document.querySelector('.boiteVideo');   if (container.requestFullscreen) {     container.requestFullscreen();   } else if (container.webkitRequestFullscreen) {     container.webkitRequestFullscreen();   } else if (container.msRequestFullscreen) {     container.msRequestFullscreen();   } });  // 可选：监听退出全屏事件，恢复布局 document.addEventListener('fullscreenchange', () => {   if (!document.fullscreenElement) {     console.log('已退出全屏');   } });

.boiteVideo {   position: relative;   width: 100%;   height: 0;   padding-bottom: 56.25%; /* 16:9 */   overflow: hidden; }  .boiteVideo iframe {   position: absolute;   top: 0;   left: 0;   width: 100%;   height: 100%;   border: none; }  #affiche {   position: absolute;   top: 200px;   left: 200px;   z-index: 1000; /* 在容器内有效即可，无需天文数字 */   background: rgba(255, 255, 255, 0.9);   padding: 20px;   border-radius: 8px;   max-width: 400px; }

⚠️ 关键注意事项：

• pointer-events: auto 必须显式设置在 #affiche 上（默认继承自父容器），否则全屏下可能失焦；
• Vimeo iframe 的 src 中建议添加 ?controls=0 隐藏原生控件，避免 UI 冲突；
• 使用 allow=”autoplay; fullscreen” 确保权限兼容性；
• 若需响应式定位（如居中题干），推荐用 transform: translate(-50%, -50%) 配合 left: 50%; top: 50%；
• 如需与 Vimeo Player.js 同步测验时机，请监听 timeupdate 事件，在指定时间点动态 show()/hide() #affiche。

通过将测验层与视频 iframe 置于同一全屏容器内，你完全绕开了跨 iframe 渲染限制，获得稳定、可控、符合现代 Web 标准的交互式视频测验体验。