本文详解如何让自定义 html 测验元素（如 #affiche）在 vimeo 视频进入原生全屏模式后仍能正确显示于视频上方，解决因 iframe 沙箱隔离与 vimeo 全屏 dom 重构导致的 z-index 失效问题。
在嵌入 Vimeo 视频时，通过 CSS 定位将 HTML 测验层（如
）叠加在
Un test overlay
Q1: 此刻视频播放到了哪个关键帧？
// 启用自定义全屏
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 标准的交互式视频测验体验。
