Place image in front of html video -

i want place image in front of html video. , here code far:

    <style>     video.videos {         background-image: url(image.png);         background-repeat: no-repeat;         z-index:1;     }     </style>  <video id="video1" class="videos" >     <img src="image.png" align="absmiddle" style="z-index:2;" >     <source src="video1.mp4" type="video/mp4"></source>           browser not support html5. video not loaded.  </video> 

but using z-index not make working. mean, image still remains behind video file. there possibility fix this? maybe other way?

place outside video tags , use style position it:

top: 100px; left: 100px; z-index: 0; position: absolute; 

naturally, you'll need adjust values specific application. if absolute positioning doesn't work you, can use relative positioning, can more flexible. see jsfiddle example of positioning image in front of video.