My video code allows for switching the video into fullscreen mode using custom controls. Here's how it looks:
fullScreenButton.addEventListener("click", function() {
if (video.requestFullscreen) {
video.videoContainer.requestFullscreen();
} else if (video.mozRequestFullScreen) {
video.mozRequestFullScreen(); // Firefox
} else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen(); // Chrome and Safari
}
});
Although this setup works well, I encountered an issue where switching to fullscreen mode would bring up default edge controls instead of my custom ones. To solve this in Chrome, I used the following CSS:
::-webkit-media-controls {
display:none !important;
}
However, I am unsure how to achieve a similar result for Microsoft Edge or FireFox. Can anyone provide guidance on how to accomplish this?