How to remove gray overlay on top of a video in firefox using the new HTML5 <video>?

Question

When viewing my web page in Firefox 31 on windows 7, the video tag shows an image of the first frame of the video with a dark / gray overlay. The video works without problems. I would like it to display without this gray / dark color (the color goes away after playing the video).

When viewing the same page in Chrome 36 or IE, the image is white and there is no gray. Here is a screenshot of the same page to illustrate

HTML code is used

  <video width="300" height="240" controls> <source src="movie.webm" type="video/webm"> <!-bright on chrome,dark on FF--> <source src="movie.ogg" type="video/ogg"> <source src="movie.mp4" type="video/mp4"> Your browser does not support the video tag. </video> 

Is there any way using css or otherwise to look the same as in Chrome above. It’s better to be able to see the screenshot more clearly before pressing the play button, and the dark gray shadow does not look beautiful.

This is all in Windows 7, 64 bit.

Answer 1

I don’t think there is anything like this. But you can display a thumbnail of this image by clicking on it, replace the thumbnail with a real video and automatically play it.