I've made a website with a HTML5 video that has a poster attritube with a screenshot from the video. This is because of the smartphone issue where autoplay is not supported to prevent excessive use of mobile data. Therefore, it will show the screenshot instead of the video on mobile platform.

I have all the webpage contents in a div with id "content". Everything works just fine, except when the website has information that needs scrolling. If you remove the fixed position for the video, it works, but then of course the website is messed up, as the video must be set to fixed position so I can scroll down the page without the video moving along.

```css
#video_background {
  position: fixed;  
  bottom: 0px; 
  right: 0px; 
  min-width: 100%; 
  min-height: 100%; 
  width: auto; 
  height: auto; 
  z-index: -1000; 
  overflow: hidden; 
}

#content {  
  position: absolute;  
  text-align: left;  
  width: 100%;  
  padding: 15px;  
}
```

```html
<video id="video_background" poster="images/video.jpg" preload="auto" loop="loop" muted="muted" autoplay="true" volume="0">   
    <source src="webvid_4.mp4" type="video/mp4"> 
    Video not supported 
</video>

<div id="content">  
    // all information goes here. If too much for the screen, the background goes black.
</div>
```

If I reload the page, it shows the poster image for half a second and turns black.

Any tips on how to get this to work? Or maybe a workaround?