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

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?

Solution 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>

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