如何在全屏模式下通过 Vimeo 视频以 HTML 格式显示测验答案

【问题标题】：How to show a quiz in HTML over Vimeo video in fullscreen mode如何在全屏模式下通过 Vimeo 视频以 HTML 格式显示测验
【发布时间】：2023-02-07 05:29:25
【问题描述】：

当视频不是全屏时，肯定很容易。

这里的结构

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

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

<div class="embed-responsive embed-responsive-16by9 boiteVideo">
<iframe id="player1" src="xxxxx" allowfullscreen=""></iframe>
<div id="affiche" class="text-success well"><h1>Un test overlay</h1></div>
</div>

我使用 Vimeo 视频和 prayer.is 在视频中的最佳时机展示测验

一切正常#affiche 在视频上，但在全屏模式下无事可做。

当我全屏查看 Vimeo 的结构时，我看到了类播放器、vp-video-wrapper、vp-video、vp-player-ui-overlays。

有人有想法，将不胜感激

谢谢

我尝试了每个类，例如播放器、vp-video-wrapper、vp-video、vp-player-ui-overlays 我可以在全屏中看到显示 <div id="affiche" 但没有任何效果。

我也尝试像这样在 iframe 中包含这个 div

$("#affiche").appendTo($("iframe"));

【问题讨论】：

您不能通过 Jquery 操作 iframe。您可以将视频上传到您的服务器并将其放入视频 HTML 标记中。
你是说我不能 .find() 一个类或类似的东西
@poete 你需要在父 Div 本身上做一个requestFullscreen，然后它会和它的孩子一起全屏（IE：Vimeo 和 Affiche 作为子元素）。为 Div 提供一个 ID 以便稍后通过代码轻松访问可能会有所帮助。所以..(1)创建一个按钮以“全屏查看测验”作为其标签。(2)单击按钮时，它将运行一个函数，使您的 Div requestFullscreen。
@VC.One 非常感谢它的工作。在这里，我为每个想做同样事情的人做了。

标签： html jquery css video vimeo

【解决方案1】：

$("#btnFullScreen").click(function(){
    
    var element = document.querySelector(".boiteVideo");
    
    element.requestFullscreen()
    
});

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

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

<button id="btnFullScreen">Open Video in Fullscreen Mode</button>

<div class="embed-responsive embed-responsive-16by9 boiteVideo">
<iframe id="player1" src="xxxxx"></iframe>
<div id="affiche" class="text-success well"><h1>Un test overlay</h1></div>
</div>

【讨论】：