CSS Overlay on Embedded Vimeo Video not Working on Firefox Fullscreen

Question

I basically have a security requirement for a project I'm working on that requires me to put an overlay with simple text over a vimeo video that's embedded on a webpage. The text is security code that needs to be generated at page-load time, so it can't be embedded in the video directly. I have an overlay code that works pretty well, but with Firefox, when I make the video fullscreen, the overlay disappears. It works for Chrome and Safari. I'm not a real front-end pro, so I cobbled together some excellent examples of overlays and have been hacking away at this for a couple of weeks now.
Unfortunately, I inherited this project and the site is in Wordpress, but has a lot of custom requirements, so there's a depth of the code that's a little challenging to wade through.

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;
}

So again, I get the overlay in Chrome and Safari both in normal embedded mode and fullscreen mode, but in Firefox it works on non-fullscreen mode but when I go to fullscreen the overlay disappears. I'm guessing this has to do with how the browsers are handling video tags, but I can't put my finder on a solution. Any help on this would be greatly appreciated!

Browser Versions:

• Chrome: 49.0
• Safari: 9.0.3
• Firefox: 46.0b1

As a follow-up, if anyone has a good strategy for doing this via a method other than something CSS-based, I'd love to hear it. Thanks!

Answer 1

I know you asked this six months ago, but I was having same problem and I found solution (for Firefox, it still doesn't work on Internet Explorer and Microsoft Edge). You just need to delete styling for .wpb_video_wrapper so your code would look like:

#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>