HTML: video z-index not working

Question

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.

<html>
<style type="text/css">
    #sampleVideo {
        position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;
    }

    #sampleImage {
        z-index: 40;
    }

</style>

<body>
<video id="sampleVideo" src="sample.mp4" autoplay/>

<script type="text/javascript">
    video = document.getElementById("sampleVideo");
</script>

<img id="sampleImage" src="enter site.png">

</body>
</html>

http://stackoverflow.com/questions/13388537/html5-video-ignoring-z-index — 001, Jul 23 '14 at 19:33

score 1 · Answer 1 · answered Jul 23 '14 at 19:32

1

You can only set z-index on non-static elements.

Try this:

#sampleImage {
    position: relative;
    z-index: 40;
}

answered Jul 23 '14 at 19:32

skippr

2,656
3
24
39

Thank you! Do you know how would I go about putting the image over the video? – stumped Jul 27 '14 at 20:08
Sorry for the late reply. If the z-index on your image is greater than the z-index of the video, the image should show in front. – skippr Aug 13 '14 at 16:13

Ben · Answer 2 · 2014-08-21T03:32:45.673

1

Dhira is correct, but you're also missing a closing video tag. I added that on the below fiddle

http://jsfiddle.net/SF66f/3/

#sampleImage {
    position: relative;
    z-index: 40;
}

edited Aug 21 '14 at 03:32

answered Jul 23 '14 at 19:50

Ben

168
1
1
7

HTML: video z-index not working

2 Answers2