HTML5 video does not hide controls in full screen in Chrome

Question

In Chrome browser, when I switch to full-screen standard standard controls showing when the mouse moves. Also, the show control function is always turned on in the right-click menu (only in full screen), I can not turn it off. So I offer these js functions, but they do not work. JS:

$('.gp_nav_fc').click(function() { elem = $('#bcVideo')[0]; if (elem.requestFullscreen) { elem.requestFullscreen(); } else if (elem.mozRequestFullScreen) { elem.mozRequestFullScreen(); } else if (elem.webkitRequestFullscreen) { elem.webkitRequestFullscreen(); } $('.gp_buttons').attr('class', 'gp_buttons fullscreen'); elem.controls = false; $('#bcVideo')[0].removeAttribute("controls"); $('#bcVideo').controls = false; }); 

HTML:

 <video id="bcVideo" src="anotherhost.com/video.mp4" style="position: absolute;" poster="poster.gif"></video> 

I have been changing src for a very long time, but the video comes from a different domain.

Answer 1

So, I find the answer to this question.

In css you need to add the following rule:

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

Additional information at the link: http://css-tricks.com/custom-controls-in-html5-video-full-screen/