CSS 嵌入式 Vimeo 视频的叠加在 Firefox 全屏上不起作用

Question

我基本上对我正在从事的项目有一个安全要求，该项目要求我在网页上嵌入的 vimeo 视频上放置一个带有简单文本的叠加层。文本是需要在页面加载时生成的安全代码，因此不能直接嵌入到视频中。我有一个效果很好的覆盖代码，但是使用 Firefox 时，当我全屏显示视频时，覆盖消失了。它适用于 Chrome 和 Safari。我不是真正的前端专家，所以我拼凑了一些优秀的覆盖示例，并且已经研究了几个星期了。
不幸的是，我继承了这个项目，网站是在 Wordpress 中，但是有很多自定义要求，所以代码很深，很难读懂。

HTML

<div class="wpb_wrapper">   
    <div class="wpb_video_wrapper">
        <iframe src="https://player.vimeo.com/video/zzzzzzzz" width="900" height="506" frameborder="0" title="The Battle against Hate (Context 4)" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>               
        <div id="vidOverlays">
            <span id="vidOverlayTop">--------</span>
            <span id="vidOverlayTitle">[CUSTOM SECURITY TEXT HERE]</span>
            <span id="vidOverlayBottom">--------</span>
        </div>      
    </div>
</div>

CSS:

.wpb_video_wrapper {
    position: relative;
}

#vidOverlays {
    position:absolute; 
    bottom: 40px;
    /* width: 100%; */
    right: 0px;
    color: #cccccc;
    background-color: #2a3132; 
    display: inline-block;
    z-index: 2147483647!important;
    opacity: 0.5;
    text-align: center;
}
#vidOverlayTop { 
    display: block;
    clear: both;
    padding-top: 2px; 
    opacity: 0.33;
    z-index: 2147483647!important;
}
#vidOverlayBottom {
    display: block;
    clear: both;
    padding-bottom: 2px; 
    opacity: 0.33;
    z-index: 2147483647!important;
}
#vidOverlayTitle {
    display: block;
    clear: both;
    padding: 2px;   
    z-index: 2147483647!important;
}

因此，我再次在 Chrome 和 Safari 中以正常嵌入模式和全屏模式获得叠加层，但在 Firefox 中，它在非全屏模式下工作，但当我进入全屏模式时，叠加层消失。我猜这与浏览器处理视频标签的方式有关，但我无法找到解决方案。对此的任何帮助将不胜感激！

浏览器版本：

Chrome: 49.0
野生动物园：9.0.3
火狐：46.0b1

作为后续行动，如果有人有好的策略通过基于 CSS 的方法以外的方法来执行此操作，我很想听听。谢谢！

Answer 1

我知道你六个月前问过这个问题，但我遇到了同样的问题并且找到了解决方案（对于 Firefox，它仍然不适用于 Internet Explorer 和 Microsoft Edge）。您只需要删除 .wpb_video_wrapper 的样式，这样您的代码将如下所示：

#vidOverlays {
 position:absolute; 
 bottom: 40px;
 /* width: 100%; */
 right: 0px;
 color: #cccccc;
 background-color: #2a3132; 
 display: inline-block;
 z-index: 2147483647!important;
 opacity: 0.5;
 text-align: center;
}
#vidOverlayTop { 
 display: block;
 clear: both;
 padding-top: 2px; 
 opacity: 0.33;
 z-index: 2147483647!important;
}
#vidOverlayBottom {
 display: block;
 clear: both;
 padding-bottom: 2px; 
 opacity: 0.33;
 z-index: 2147483647!important;
}
#vidOverlayTitle {
 display: block;
 clear: both;
 padding: 2px;   
 z-index: 2147483647!important;
}

<div class="wpb_wrapper">   
 <div class="wpb_video_wrapper">
  <iframe src="https://player.vimeo.com/video/184455304" width="900" height="506" frameborder="0" title="The Battle against Hate (Context 4)" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>               
  <div id="vidOverlays">
   <span id="vidOverlayTop">--------</span>
   <span id="vidOverlayTitle">[CUSTOM SECURITY TEXT HERE]</span>
   <span id="vidOverlayBottom">--------</span>
  </div>      
 </div>
</div>

CSS 嵌入式 Vimeo 视频的叠加在 Firefox 全屏上不起作用

CSS Overlay on Embedded Vimeo Video not Working on Firefox Fullscreen

html

css

overlay

vimeo