Im trying to create custom controls for an HTML5 video player. In full-screen Google Chrome, user controls are visible. But in Mozilla firefox, controls are hidden behind a full-screen shell. I tried all the techniques for providing the z-index above 2147483647 and all, but nothing helped.
Can someone help me by suggesting a better solution? Here is my HTML
<div class="video_container">
<video width="400" height="225" poster="">
<source src="introSnaphots.mp4" type="video/mp4">
</video>
<div class="player" style="width: 95%; left: 2.5%;">
<div class="play-pause play">
<div class="play-button glyphicon glyphicon-play"></div>
<div class="pause-button glyphicon glyphicon-pause"></div>
</div>
<div class="v_progress">
<div class="v_progress-bar" style="width: 0px;">
<div class="button-holder">
<div class="v_progress-button" style="left: -14px;"> </div>
</div>
</div>
<div class="time">
<span class="ctime"></span>
<span class="stime"></span>
<span class="ttime"></span>
</div>
<div class="buffered" style="left: 0%; width: 100%;"></div>
</div>
<div class="volume">
<div class="volume-holder">
<div class="volume-bar-holder">
<div class="volume-bar">
<div class="volume-button-holder">
<div class="volume-button"> </div>
</div>
</div>
</div>
</div>
<div class="volume-icon v-change-0">
<span class="glyphicon glyphicon-volume-up"></span>
</div>
</div>
<div class="fullscreen">
<a href="#" class="FullscreenOff">
<span class="glyphicon glyphicon-resize-full"></span>
</a>
</div>
</div>
</div>
source
share