title: HTML: video z-index not working
body: <p>I'm trying to get the image to show up over the video, but it's not even appearing under the video. There's some blank space in the upper left-hand corner, but the image isn't appearing there either. The image only shows up when I take the HTML code of the video out.</p>
  
  <pre><code>&lt;html&gt;
  &lt;style type="text/css"&gt;
      #sampleVideo {
          position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;
      }
  
      #sampleImage {
          z-index: 40;
      }
  
  &lt;/style&gt;
  
  &lt;body&gt;
  &lt;video id="sampleVideo" src="sample.mp4" autoplay/&gt;
  
  &lt;script type="text/javascript"&gt;
      video = document.getElementById("sampleVideo");
  &lt;/script&gt;
  
  &lt;img id="sampleImage" src="enter site.png"&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>