You can hide all media-controls from video tags like that
video::-webkit-media-controls {
display:none !important;
}
Solution 1 :
Problem :
I implemented some custom controls for my player and I need to hide the player controls that
appear when I move to fullscreen and show my custom controls. How can I achieve this?
onFullScreenClick() {
var elem = document.getElementById('video');
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
}
<div
className={'video-player'}
onMouseEnter={this.enterVideoArea}
onMouseLeave={this.leaveVideoArea}
>
<video
ref={'video'}
id={'video'}
width={'640'}
className="react-video-player"
controls={false}
loop
autoPlay
onClick={this.togglePlay}
/>
<div
Comments
Comment posted by DBS
I imagine that as you’re making the video element fullscreen, any custom controls will not appear (as they’re not children of the video element). You may need to make whatever container element holds the controls fullscreen instead. (It would be good if you could expand your snippet to a working example of the problem)