how can I remove the black background from a html5 video? It appears for a few seconds while loading. Using CSS didn't work.
The HTML:
<div id="start-screen">
<video id="video-element">
<source src="video-mp4.mp4" type="video/mp4">
<source src="video-oggtheora.ogv" type="video/ogg">
</video>
</div>
The CSS (not working):
#start-screen, video-element {
background-color: #fff !important;
}
Thanks!
I didn't find a working solution with CSS. But what I found was that using a very small, white (or whatever color you want) poster image does the trick. So if you have the same problem, that's how I did it. I just used a 100x100px PNG file (~ 1KB in size).
<div id="start-screen">
<video id="video-element" poster="/images/white-poster-image.png">
<source src="video-mp4.mp4" type="video/mp4">
<source src="video-oggtheora.ogv" type="video/ogg">
</video>
</div>
Have fun!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With