Place Text over a full screen video - text

Question

Working on a little self project and having some trouble getting text placed on top of my background video.
At present, the code is sitting as follows:
<div class="video_container">
<div class="contentContainer">
<div class="skipButton">
<h1>Skip</h1>
</div>
<video id="tgVideo" autoplay loop>
<source src="videos/bgvidm4v.m4v" preload="none">
</video>
</div>
</div>
I am making the video full screen and keep this way when displaying on different size monitors by using the following JS
$(document).ready(function () {
var vid = $('video');
var vid_w_orig = 1280;
var vid_h_orig = 720;
// re-scale image when window resizes
$(window).resize(function () {
//Get the parent element size
var container_w = vid.parent().width();
var container_h = vid.parent().height();
//Use largest scale factor of horizontal/vertical
var scale_w = container_w / vid_w_orig;
var scale_h = container_h / vid_h_orig;
var scale = scale_w > scale_h ? scale_w : scale_h;
//Scale the video to fit any size screen
vid.width(scale * vid_w_orig);
vid.height(scale * vid_h_orig);
});
//Trigger re-scale of the video on pageload
$(window).trigger('resize');
});
This combination is working flawlessly for me so far. Only issue is getting the video to run on Android/iOS, but I think that's a limitation of the device.
What I am in need of is adding a piece of text for now that a user can click on to bring them away from the video. I am adding the href to the button after I get the text to display on top of the video.
I have found some tutorials online and have tried the below
.video_container .contentContainer {
position: absolute;
width: 100%;
height:100%;
background:#000;
opacity:0.5;
z-index:999;
}
.video_container .contentContainer .skipButton {
width:100%;
text-align:center;
}
.video_container .contentContainer .skipButton h1 {
color:#FFF;
text-transform:uppercase;
}
This is working for the most part, where I can see the text for a split second before it disappears behind the video.
Anyone have any tips for me?
Cheers!

Answer 1

You are setting the whole container to z-index: 999, this element .contentContainer contains also the video element. So I would put z-index only on the text containers alone with non-static position in order z-index to take effect.
.video_container .contentContainer {
position: absolute;
width: 100%;
height:100%;
background:#000;
opacity:0.5;
z-index:999; // not needed
}
.video_container .contentContainer .skipButton {
width:100%;
text-align:center;
position: relative;
z-index: 1000;
}
.video_container .contentContainer .skipButton h1 {
color:#FFF;
text-transform:uppercase;
position: relative;
z-index: 1000;
}