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

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

）叠加在

Un test overlay

Q1: 此刻视频播放到了哪个关键帧？

选项 A

// 启用自定义全屏
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 标准的交互式视频测验体验。