html5 video player full screen

Question

I have a html5 video player with custom controls attached in the same div

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

and css;

.controls {
 display: none;
}
.container:hover .controls {
 display: block;
}

then finally javascript

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

 container.requestFullscreen();
}

When I set the video to fullscreen mode the video stretches to its full size using

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

and

.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; }

The video appears to stretch to its maximum size (it's fairly low resolution) but it doesn't fill the screen. The controls also sit underneath the video instead of nicely hovering over it like before.

How do I make the video fill the screen

N.B. javascript just a rough example of how it looks, there is more cross browser code in there but it's ugly.