title: CSS how to disable microsoft edge media controls in fullscreen mode?
body: <p>I have the following code which switches my video into fullscreen mode using my custom controls:</p>
  
  <pre><code> 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
                }
   });
  </code></pre>
  
  <p>This works great but when I switch to fullscreen the custom controls are not there and the default edge controls are. For chrome I did this:</p>
  
  <pre><code>::-webkit-media-controls {
    display:none !important;
  }
  </code></pre>
  
  <p>And that worked but I dont know how to do it for Microsoft Edge or FireFox. Can someone please tell me how to do that?</p>