I am having an issue in Firefox specifically where my elements, before being played, have a bright grey play button overlay over the poster attribute image:
Versus in Chrome and IE where the player appears as such:
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 has been asked in 1 other thread two years ago (How to remove the gray overlay on top of the Video in firefox using the new HTML5 <video>?) that I can find, but no solution was ever presented. I am willing to use javascript in the solution, but I do not want to completely redesign the controls.