Having some trouble with HTML5 video on a non-app mobile page. I've added text over the video using an overlay div. It works fine in normal mode, but the z-index doesn't seem to work when the video is in full-screen mode. I've been struggling with this issue for a while now and despite searching on Google, StackOverflow, and CSS-tricks, I haven't found a solution yet.
Here is my code:
(function($, d) {
$.each(readyQ, function(i, f) {
$(f)
});
$.each(bindReadyQ, function(i, f) {
$(d).bind("ready", f)
})
})(jQuery, document).vcontainer {
position: relative;
}
.vcontainer video {
position: relative;
z-index: 0;
}
.voverlay {
position: absolute;
top: 4%;
left: 4%;
z-index: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
video::-webkit-media-controls-fullscreen-button {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<section class="footer-links">
<div class="container">
<div class="row">
<div class="col-md-8 col-sm-12">
<div class="section-title text-justify">
<div class="vcontainer responsive float-center" id="myvideo">
<video width="100%" height="auto" controls controlsList="nodownload" poster="" data-setup='{}'>
<source src="video.mp4"/>
</video>
<div class="voverlay">
<p>
<span class="float-right sm-12 badge badge-danger">Student Name Reg-212111</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>