Javascript 如何用VideoJS全屏显示HTML视频覆盖？

我有一个测试视频叠加，当videojs播放器处于标准模式时，它会很好地显示出来：

然而，当进入全屏时，它会消失（可能在视频后面）

我发现了一个过时的解决方案，它最大限度地指定了。它在最新的Chrome和Firefox中不起作用

我找到了另一个全屏显示的解决方案，不是视频播放器本身，但它不能与videojs播放器设置一起工作

然后，我找到了一个很有希望的解决方案，如何让覆盖元素在全屏上显示，并试图实现它，但没有成功：

HTML来自我上次尝试的内容（参见fiddle）：

CSS:

#overlays-wrap {
position: absolute;
width: 100%;
height: 100%;
max-height:460px;
left: 0;
top: 0;
z-index: 2147483647;
}

.overlay-item {
position: absolute;
top: 0;
color: #FFF;
font-size: 20px;
background-color: rgba(0, 0, 0, 0.85);
width: 100%;
height: 100%;
padding: 0;
z-index: 2147483647;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
backface-visibility: hidden;
}

.overlay-item .vo-question {
margin: 10px 0 40px 0;
width: 80%;
text-align: center;
line-height: 1.5;
}

.vtask-choices-wrap {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-evenly;
width: 100%;
max-width: 1000px;
min-height: 10rem;
}

.vtask-choice-item .vtask-choice {
opacity: 0;
position: absolute;
top: 0;
left: 0;
}

.radio-tile {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
border: 2px solid #079ad9;
border-radius: 5px;
padding: 1rem;
transition: transform 300ms ease;
background: rgba(0,0,0,0.5);
z-index: 500;
cursor: pointer;
font-size: 18px;
text-align: center;
}

.vtask-btn-continue {
color: #FFFFFF!important;
border-color: #2B78C5;
border-bottom-color: #2a65a0;
text-decoration: none;
text-shadow: none;
color: #FFF;
background: #39F;
margin-top: 40px;
padding: 10px 20px;
font-family: Arial,sans-serif;
font-size: 16px;
}


/* FIX according https://stackoverflow.com/a/13388579/1066234 */
#videoplay {
position: absolute;
left: 0px;
top: 0px;
min-height: 100%;
min-width: 100%;
z-index: 9997;
}
#overlays-wrap {
position: absolute;
left: 0px;
top: 0px;
height: 100%;
width: 100%;
z-index: 9998;
}

#main_container {
float: left;
position: relative;
left:0;
top:0;
}

有趣的是，在全屏上使用videojs插件，覆盖层似乎甚至在全屏上也能工作。但我不知道它是如何做到的演示：–我的覆盖图有更复杂的HTML，无法使用此插件

这个视频/视频JS问题的解决方案是什么

---

如果您能提供帮助，也许这将是最好的，有了这个小提琴的起点（我最近的实现）：谢谢

问题似乎是，这个库将视频包装在一个额外的div中，并使该div全屏显示-但是您的

#overlays wrap

元素在该元素之外，我认为z-index不应该改变这一点（？）

将覆盖直接放入源代码中的

#videowrapper

中并不能起作用-播放器库获取

#videoplay

，创建包装div并将id放在上面。（它将视频元素本身的id更改为

\videoplay\u html5\u api

，因此在这方面没有冲突。）新的div

\videoplay

变为全屏，但是

\overlays wrap

仍然只是DOM中的一个兄弟，所以在全屏元素之外

但是，如果在播放器初始化后将

#覆盖包裹

移动到

#视频播放

，它似乎可以工作：

video = videojs('videoplay', options); // wraps video element into div#videoplay

$('#overlays-wrap').appendTo($('#videoplay')); // append #overlays-wrap to div#videoplay

---

问题似乎是，这个库将视频包装在一个额外的div中，并使该div全屏显示-但是您的

#overlays wrap

元素在该元素之外，我认为z-index不应该改变这一点（？）

将覆盖直接放入源代码中的

#videowrapper

中并不能起作用-播放器库获取

#videoplay

，创建包装div并将id放在上面。（它将视频元素本身的id更改为

\videoplay\u html5\u api

，因此在这方面没有冲突。）新的div

\videoplay

变为全屏，但是

\overlays wrap

仍然只是DOM中的一个兄弟，所以在全屏元素之外

但是，如果在播放器初始化后将

#覆盖包裹

移动到

#视频播放

，它似乎可以工作：

video = videojs('videoplay', options); // wraps video element into div#videoplay

$('#overlays-wrap').appendTo($('#videoplay')); // append #overlays-wrap to div#videoplay

---

你深入研究这个问题并能找到解决方案，真是太棒了。非常感谢。是的，感谢您为现有ID解释.appendTo（）API。它解决了我一直在努力解决的一个难题，当我遇到标准模式和全屏模式之间的行为差异时。您深入研究这个问题并找到解决方案的方法真是太棒了。非常感谢。是的，感谢您为现有ID解释了.appendTo（）API。它解决了一个困扰我的难题，当我遇到标准模式和全屏模式之间的行为差异时。

video = videojs('videoplay', options); // wraps video element into div#videoplay

$('#overlays-wrap').appendTo($('#videoplay')); // append #overlays-wrap to div#videoplay