Firefox, Chrome, Safari have grey background for MP4 HTML5 video

google-chrome firefox safari ffmpeg html5-video

After a long search and tests here is a working solution

Solution :

CSS

.brightness{    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'brightness\'><feColorMatrix type=\'matrix\' values=\'1.2 0 0 0 0 0 1.2 0 0 0 0 0 1.2 0 0 0 0 0 1.2 0\'/></filter></svg>#brightness"); /* Firefox 3.5+ */    -webkit-filter:brightness(108.5%); /* Chrome 19+ & Safari 6+ */}

HTML

<div class="brightness"><video src="http://www.botlibre.com/media/a786628.mp4"></video></div>

https://jsfiddle.net/27L5nvg4/1/

Solution Demonstration

.brightness{    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'brightness\'><feColorMatrix type=\'matrix\' values=\'1.2 0 0 0 0 0 1.2 0 0 0 0 0 1.2 0 0 0 0 0 1.2 0\'/></filter></svg>#brightness"); /* Firefox 3.5+ */    -webkit-filter:brightness(108.5%); /* Chrome 19+ & Safari 6+ */}

<div class="brightness"><video src="http://www.botlibre.com/media/a786628.mp4"></video></div>

Expand snippet