Firefox equivalent of moz-media-controls - webkit

Question

I working on a project that involves a video player. I'm using the native tag on HTML. I want to have an image shown in the fullscreen mode. I can do so with the following CSS selector, but it only works on Chrome:
::-webkit-media-controls {
/*display:none !important;*/
background-repeat: no-repeat;
background-position: top;
background-image: url("../images/match_com.png");
}
How can I make this work on Firefox as well? There must be a equivalent of -webkit-media-controls for firefox.

Answer 1

There might not be a Firefox equivalent. This article discusses how to hide the fullscreen video controls in Webkit-based browsers, but fails to find a moz- prefixed equivalent:
http://css-tricks.com/custom-controls-in-html5-video-full-screen/
But, as it mentions, another thing you can do is fullscreen an outer element that contains the video element, rather than fullscreening the video element itself. Then you can control what the user sees. But I think this works best with video elements that don't have their own controls enabled, since the standard video controls include a fullscreen button that won't do what you want.
To fullscreen any element, use the requestFullscreen method. It works on all the current major browsers, although some of them may still require using a prefixed name (i.e. mozRequestFullscreen).
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode