CODEWITHSUNDEEP
csshtmlvideohtml5-video
Ole Spaarmann
Ole Spaarmann

Reputation: 16749

Remove black background from html5 video. Appears for a second

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!

Upvotes: 8

Views: 15904

Answers (2)

soorena sanagoo
soorena sanagoo

Reputation: 1

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

Upvotes: 0

Ole Spaarmann
Ole Spaarmann

Reputation: 16749

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!

Upvotes: 11

Related Questions