title: Place image in front of html video
body: <p>I want to place an image in front of html video. And here is my code so far:</p>
  
  <pre><code>    &lt;style&gt;
      video.videos {
          background-image: url(image.png);
          background-repeat: no-repeat;
          z-index:1;
      }
      &lt;/style&gt;
  
  &lt;video id="Video1" class="videos" &gt;
      &lt;img src="image.png" align="absmiddle" style="z-index:2;" &gt;
      &lt;source src="video1.mp4" type="video/mp4"&gt;&lt;/source&gt; 
           Browser does not support HTML5. Video could not be loaded.
  
  &lt;/video&gt;
  </code></pre>
  
  <p>But using z-index does not make it working. I mean, the image still remains behind the video file. Is there a possibility to fix this? Maybe any other way?</p>