Are user controls available when you click fullscreen on HTML5 video?

Question

I created custom controls for my HTML5 video, but I don’t know how to use this CSS when I go in full screen.

Here [site] I based my controls.

On this site, you'll notice that when you click the full-screen button, user controls are lost and the video returns to the default <video> controls.

Does anyone know how these styles for custom controls / CSS still apply during full-screen browsing?

Answer 1

I answered my question, the key is that the user controls are inside the <div> , which includes the video that you want to use in full screen. In my code below, this <div> is called "videoContainer".

Here is 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 entering and exiting fullscreen 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 is 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 user controller

 #customController{ -------------------; -------------------; -------------------; z-index: 2147483647; } 

Hide embedded controller

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