How to disable default controls on a full screen HTML5 video?

Question

I have a video of a specified width and height, double clicking on which makes it go full screen using videoElement.webkitRequestFullScreen(). By default the video does not have any controls. But for some reason, on going full screen, the default controls pop up. Here is what I'm doing :

<video id="videoId" width="320" height="240" autoplay="autoplay" ondblclick="enterFullScreen('videoId')" src="Blah.mp4"></video>

And the enterFullScreen(...) function is defined as :

function enterFullScreen(elementId) {
    var element = document.getElementById(elementId);
    element.webkitRequestFullScreen();
    element.removeAttribute("controls");
}

As you can see, I've already tried removing the controls in the function. But to no avail.

Could someone tell me how to prevent this auto insertion of default controls from happening?

Answer 1

This is possible to solve with CSS, as described here: HTML5 video does not hide controls in fullscreen mode in Chrome

video::-webkit-media-controls {
  display:none !important;
}

Answer 2

Finally, I found a way around this. As Alexander Farkas suggested, I wrapped the video in another div, and I set this parent div to go full screen, after which I set the height and width of the video to screen.height and screen.width respectively. And I restored the original properties of both the divs on exiting full screen.

Pseudo Code :

HTML :

<div id="videoContainer" style="position:absolute;background-color:black;">
     <video id="videoId" style="height:240;width:320;" ondblclick="enterFullScreen('videoId')" src="movie.mp4"></video>
</div>

JavaScript :

function enterFullScreen(id) {
    var element = document.getElementById(id);
    element.parentNode.webkitRequestFullScreen();           
    element.style.height = screen.height;
    element.style.width = screen.width;
}
document.addEventListener("webkitfullscreenchange", function () {
    if(!document.webkitIsFullScreen) {
        // Restore CSS properties here which in this case is as follows :
        var element = document.getElementById('videoId');
        element.style.height=240;
        element.style.width=320;
    }
    }, false);