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
Safari：9.0.3
Firefox：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>

嵌入式Vimeo视频上的CSS覆盖不能在Firefox全屏上工作

1 个答案: