无论我如何将DOM中的元素作为html5视频上的叠加(静态或动态),Firefox中的这些元素都不可见,尽管z-index设置为2147483647,不透明度为1和显示块.
看到2个类似的答案,在Chrome中工作,但不在FF中:
我有一个测验视频覆盖，当 videojs 播放器处于标准模式时，它会很好地显示：https ://jsfiddle.net/kai_noack/zxtkgme7/20/
但是，当进入全屏时它会消失（可能在视频后面）。
我找到了一个过时的解决方案，它将叠加层的z-index指定为最大值。它不适用于最新的 Chrome 和 Firefox。
我找到了另一种解决方案来与 parent进行全屏，而不是 videoplayer 本身，但它不适用于 videojs player 设置。
然后我找到了一个很有前途的解决方案，即如何通过设置 position:absolute;使覆盖元素出现在全屏上。并试图实现它但没有成功：https : //jsfiddle.net/kai_noack/zxtkgme7/26/
我上次尝试的HTML（见小提琴）：
<div id="main-container">
<div id="overlays-wrap">
<div class="overlay-item" data-overlayid="59" data-time="41">
<p class="vo-question">
Welche Zahl ist die Summe bei 3 + 50 = 53?
</p>
<div class="vtask-choices-wrap">
<div class="vtask-choice-item">
<input class="vtask-choice" type="radio" name="quiz" id="59-a1" value="1" data-correct="0">
<label class="radio-tile" for="59-a1">
<span class="radio-tile-label">
3
</span>
</label>
</div>
<div class="vtask-choice-item">
<input …