title: HTML5 video background in Android showing black
body: <p>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.</p>
  
  <p>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.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#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;  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;video id="video_background" poster="images/video.jpg" preload="auto" loop="loop" muted="muted" autoplay="true" volume="0"&gt;   
      &lt;source src="webvid_4.mp4" type="video/mp4"&gt; 
      Video not supported 
  &lt;/video&gt;
      
  &lt;div id="content"&gt;  
      // all information goes here. If too much for the screen, the background goes black.
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>If I reload the page, it shows the poster image for half a second and turns black.</p>
  
  <p>Any tips on how to get this to work? Or maybe a workaround?</p>