How do I remove the following HTML5 element control in Firefox?
I am having an issue in Firefox, specifically where my elements have a bright gray play button overlaid on the poster attribute image before being played:
Unlike Chrome and IE, where the player looks like this:
My HTML is basic:
main {
width: 75%;
height: 700px;
padding-right: 1.9%;
float: left;
position: relative;
}
video {
margin-left: 9.2%;
margin-top: 11%;
border: 4px solid black;
object-fit: initial;
}
/*Causes the poster to not leave gaps between itself and the border*/
<video id="video" width="768" height="432" poster="img/main/intro1poster.png" controls>
<source src="media/videos/intro1.mp4" type="video/mp4">
<p>Your browser doesn't support HTML5 video or Flash.
A low quality version of the video can be found here: <br/>
<a href="https://www.youtube.com/watch?v=BDw7xpzH-68">Dev Update #1</a></p>
</video>
This question was asked back in another thread two years ago ( How to remove gray overlay over video in firefox using the new HTML5 <video>? ) Which I can find, but no solution has been provided. I am ready to use javascript in the solution, but I do not want to completely redo the controls.
source to share
This is Firefox's default control user interface. We still don't have the option to change it in this browser, so you're bound to two parameters:
-
Create your own management user interface .
This will allow you to have a consistent and fully customizable user experience across all browsers. -
Using some hacks that may be damaged in the future (or even in the past)
Here's one such hack that I've only tested on FF 54:
This overlay disappears whenever you start playing a video.
By setting the video attribute autoplay
, we can get rid of it. But you need to call its method as soon as possible pause()
to avoid actually playing the video.
// pause it as soon as possible
document.getElementById('video').pause();
video {
margin-left: 9.2%;
margin-top: 11%;
border: 4px solid black;
object-fit: initial;
}
<video id="video" width="768" height="432" poster="https://upload.wikimedia.org/wikipedia/commons/thumb/5/55/John_William_Waterhouse_A_Mermaid.jpg/800px-John_William_Waterhouse_A_Mermaid.jpg" controls autoplay>
<!-- simply added 'autoplay' attribute -->
<source src="https://dl.dropboxusercontent.com/s/bch2j17v6ny4ako/movie720p.mp4" type="video/mp4">
</video>
source to share