Remove black background from html5 video. Appears for a second

Question

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!

Caoutchouc

Answer 1

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!

Caoutchouc

This was only an issue for me in IE. Unfortunately this did not work in IE11. – Bibb

Answer 2

You can use a CSS class like this to remove the black bar:

[data-next-video] {
  height: unset !important;
}

I use the next-video library

Polychromy