如何在全屏Vimeo视频上层展示HTML测验？

问题根源 #

浏览器全屏API限制：当iframe单独进入全屏时，外部DOM元素不会被纳入全屏上下文；且Vimeo iframe属于跨域资源，同源策略禁止直接修改其内部DOM，所以你之前尝试的移入iframe方法无效。

方法1：让父容器整体全屏（推荐） #

将视频和弹窗放在同一个父容器中，一起进入全屏，避免跨域和上下文问题：

1. 修改CSS：给父容器添加相对定位，确保弹窗基于父容器定位，并适配全屏样式

.boiteVideo {
  position: relative; /* 新增：作为弹窗的定位基准 */
}

.boiteVideo iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#affiche{
  z-index: 2147483647;
  position: absolute;
  left: 200px;
  top: 200px;
  background: white; /* 新增：避免被视频内容穿透 */
  display: none; /* 默认隐藏，按需显示 */
}

/* 全屏状态下弹窗样式（兼容多浏览器） */
.boiteVideo:fullscreen #affiche,
.boiteVideo:-webkit-full-screen #affiche {
  position: absolute;
  /* 可选：改为居中显示，适配全屏 */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

2. 修改JS逻辑：通过Player.js控制父容器全屏，而非让iframe单独全屏

// 初始化Vimeo播放器
const player = new Vimeo.Player('player1');
const boiteVideo = document.querySelector('.boiteVideo');
const affiche = document.getElementById('affiche');

// 监听播放时段，显示/隐藏弹窗
player.on('timeupdate', (data) => {
  // 示例：第10-15秒显示弹窗
  if (data.seconds >= 10 && data.seconds < 15) {
    affiche.style.display = 'block';
  } else {
    affiche.style.display = 'none';
  }
});

// 拦截播放器的全屏请求，改为父容器全屏
player.on('fullscreenchange', (data) => {
  if (data.fullscreen) {
    // 触发父容器全屏
    boiteVideo.requestFullscreen?.() || boiteVideo.webkitRequestFullscreen?.();
    // 取消iframe自身的全屏状态，避免冲突
    player.exitFullscreen();
  } else {
    // 退出全屏
    document.exitFullscreen?.() || document.webkitExitFullscreen?.();
  }
});

方法2：监听全屏事件，动态迁移弹窗 #

如果必须让iframe单独全屏，可通过监听浏览器全屏事件，将弹窗移至全屏上下文：

1. 修改CSS：添加全屏专属样式

.boiteVideo {
  position: relative;
}

.boiteVideo iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#affiche{
  z-index: 2147483647;
  position: absolute;
  left: 200px;
  top: 200px;
  background: white;
  display: none;
}

/* 全屏状态下的弹窗样式 */
#affiche.fullscreen-overlay {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 999999; /* 确保覆盖全屏视频 */
}

2. 添加全屏监听逻辑

const player = new Vimeo.Player('player1');
const affiche = document.getElementById('affiche');
const boiteVideo = document.querySelector('.boiteVideo');

// 播放时段控制弹窗显示
player.on('timeupdate', (data) => {
  const isShow = data.seconds >= 10 && data.seconds < 15;
  affiche.style.display = isShow ? 'block' : 'none';

  // 同步全屏状态
  if (isShow) {
    const isFullscreen = document.fullscreenElement || document.webkitFullscreenElement;
    if (isFullscreen) {
      affiche.classList.add('fullscreen-overlay');
      document.body.appendChild(affiche);
    } else {
      affiche.classList.remove('fullscreen-overlay');
      boiteVideo.appendChild(affiche);
    }
  }
});

// 监听浏览器全屏变化
const handleFullscreenChange = () => {
  if (affiche.style.display !== 'block') return;
  
  const isFullscreen = document.fullscreenElement || document.webkitFullscreenElement;
  if (isFullscreen) {
    affiche.classList.add('fullscreen-overlay');
    document.body.appendChild(affiche);
  } else {
    affiche.classList.remove('fullscreen-overlay');
    boiteVideo.appendChild(affiche);
  }
};

document.addEventListener('fullscreenchange', handleFullscreenChange);
document.addEventListener('webkitfullscreenchange', handleFullscreenChange);

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