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

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

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>

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