Having custom controls still apply when go fullscreen on a HTML5 video? - html

Question

I've made custom controls for my HTML5 video but I don't know how to have that CSS still apply when I go fullscreen.
Here's the [website] I've based my controls on.
On this site, you'll notice that when you click the fullscreen button the custom controls get lost and the video reverts to the default <video> controls.
Does anyone know how to have these custom controls styling/CSS still apply when you go fullscreen?

Answer 1

i answered my own question, the key is that the custom controls are inside the <div> that includes the video that you want to take full screen. In my code below, this <div> is called "videoContainer".
Here's the link I used to figure this out.
http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/ControllingMediaWithJavaScript/ControllingMediaWithJavaScript.html
here's the JS code for both entering and exiting fullscreen mode in webkit and mozilla browsers:
var $video=$('video');
//fullscreen button clicked
$('#fullscreenBtn').on('click', function() {
$(this).toggleClass('enterFullscreenBtn');
if($.isFunction($video.get(0).webkitEnterFullscreen)) {
if($(this).hasClass("enterFullscreenBtn"))
document.getElementById('videoContainer').webkitRequestFullScreen();
else
document.webkitCancelFullScreen();
}
else if ($.isFunction($video.get(0).mozRequestFullScreen)) {
if($(this).hasClass("enterFullscreenBtn"))
document.getElementById('videoContainer').mozRequestFullScreen();
else
document.mozCancelFullScreen();
}
else {
alert('Your browsers doesn\'t support fullscreen');
}
});
and here's the HTML:
<div id="videoContainer">
<video>...<source></source>
</video>
<div> custom controls
<button>play/pause</button>
<button id="fullscreenBtn" class="enterFullscreenBtn">fullscreen</button>
</div>
</div>

Answer 2

Show custom controller
#customController{
-------------------;
-------------------;
-------------------;
z-index: 2147483647;
}
Hide native controller
video::-webkit-media-controls {
display:none !important;
}
video::-webkit-media-controls-enclosure {
display:none !important;
}

Answer 3

Here's a solution that uses the modern Fullscreen API, which is supported on all major browsers today.
// `container` is the element containing the video and your custom controls
const toggleFullscreen = () => {
if(document.fullscreenElement) {
document.exitFullscreen();
} else {
container.requestFullscreen();
}
};