Я добавляю видео html5 на веб-страницу
<video width="610" height="571" controls="controls" poster="image.jpg">
Фон этого видео серый в FireFox, однако я добавил атрибут poster к тегу видео, чтобы вставить изображение, но серый фон по-прежнему обертывает изображение плаката и показывает серую рамку вокруг него.
Я пытался background-color:transparent !important; правило для тега видео, но ничего не изменилось Как я могу изменить цвет фона для тега видео html5 в FireFox?
На это ответили здесь: https://stackoverflow.com/a/30591117/550454 от интика
Решение:
CSS
.brightness{ filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filterid=\'brightness\'>#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/
Демонстрация решения
> > .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> > >
Демонстрация проблемы
> >> > <div class="brightness"> > <video src="http://www.botlibre.com/media/a786628.mp4"> > </video> > </div> > >
