Javascript html5视频播放器全屏

我有一个html5视频播放器，在同一个div中附加了自定义控件

<DIV CLASS="container">
<VIDEO SRC="Some video"/>
<DIV CLASS="CONTROLS">
<button>play</button>
<button>magic play</button>
</DIV>
</DIV>

最后是javascript

function clickedFullScreenThing(clicked) {
 var container = clicked.parentNode // may need to extend to get .container

 container.requestFullscreen();
}

当我将视频设置为全屏模式时，视频会使用

.container:full-screen .controls video {
    min-height:100%;
    min-width:100%;
    height:auto;
    width:auto;
    position:absolute;
    top:0; bottom:0;
    margin:auto auto;
}

及

视频似乎已扩展到其最大大小（分辨率相当低），但屏幕上并没有显示视频。控件也位于视频下方，而不是像以前一样在视频上方漂亮地悬停

如何让视频充满屏幕

---

注意：javascript只是一个粗略的例子，里面有更多的跨浏览器代码，但很难看。

检查这个。可能重复我的问题不是使div全屏，而是在全屏模式下填充屏幕。

.container:full-screen .controls video {
    min-height:100%;
    min-width:100%;
    height:auto;
    width:auto;
    position:absolute;
    top:0; bottom:0;
    margin:auto auto;
}

.container:-webkit-full-screen .controls { display: block; }
.container:-moz-full-screen .controls { display: block; }
.container:full-screen .controls { display: block; }
.container:fullscreen .controls { display: block; }