Search code examples
csshtmlvideo

HTML5 Video flashes white before playing?

I am using HTML5 Video tags to embed an OGG/MP4/OGV video file into my site. The problem is that there's a white box that flashes where the video goes for a split second before it loads. I tried changing the background color of the video element, but it's still showing a white box. Is there any way to prevent this?

my CSS:

video {
  background-color:#000;
  width:100%;
  height:auto;
}

Thanks!

Solution

  • I had this problem with a similar setup i.e. height:auto on the video and the parent height not a fixed value. Adding a border to the video seemed to fix the issue. Not sure why but I guess it forces the browser to render the video layout before height is fully calculated.

    video {
    // ...
    border-bottom: 1px solid transparent;
}