在Mozilla Firefox上全屏显示HTML5自定义控件

Question

我正在尝试为HTML5视频播放器创建自定义控件。 在Google Chrome的全屏模式下，自定义控件可见。 但 在Mozilla firefox中，控件隐藏在全屏包装器后面。 我已经尝试了所有给出z-index高于2147483647的技术，但没有任何帮助。

有人可以通过提供更好的解决方案来帮助我吗？ 这是我的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>