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?

Solution 1

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);

Solution 2

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

Solution 3

If a video goes fullscreen, the user agent should show the controls, also if controls attribute is absent.

Newer user agents also support fullscreen API on any element. Therefore you can try the following:

element.parentNode.webkitRequestFullScreen();

Comments

[Vishnu]

Could you please tell me how to find the id of the div containing the controls?

[Ankit]

you can use firebug in mozilla firefox or developer tool in IE. or you can use "view source" of the video page after initiating the video and then you have to walk through the html to find out the id of div element.

[Vishnu]

Its not that simple. I've already tried that before posting the question here.

[JJJ]

Vie source shows the original HTML file, not the current structure. You need to use the dev tools or in FF higlight the area, right click and view source of selection.

[Ankit]

can you provide me a link to your page?

[Ankit]

i am not able to see anything but "Double Click on the video to enter Full-Screen." on the link provided by you. what you can do is download latest flowplayer from here flowplayer.org and put flowplayer in your html its free and efficient.

[Vishnu]

I'm sorry, but that is not going to solve my problem. Thanks anyway.

[Vishnu]

Sadly, it is over-riding this too :(

[Ian Devlin]

Thought that might be the case.

[Vishnu]

Thanks, but I had already tried this. This does not solve the problem as although the parent div goes fullscreen, the video sticks to its original resolution. Could you tell me why the controls are mandatory on a fullscreen video? Is there no way to remove it? It is a live stream that I'm displaying, and it seems absurd to have Play/Pause buttons and a seek bar.

[alexander farkas]

This is the solution and used by all videoplayer scripts. To change the dimensions of your video in fullscreen, simply use CSS: width: 100%; height: 100%;

[Vishnu]

Well, on going full screen, the original height and width properties of that particular element aren't affected. So, even if I were to set the Video's height and width to 100%, the resolution remains the same on going full screen. You can verify this.

[Vishnu]

I solved the issue. I just had to fiddle around with the CSS to make sure that the child element filled up the screen. Thanks :)

[Vishnu]

At the point of time when I asked the question, this option wasn't available. Thanks nevertheless :)

[riv]

This hides the controls in all modes, not just fullscreen. I can't find a way to make it work for fullscreen only, since none of the :fullscreen selectors seem to work on these elements.