Floating div over video tag

Question

I am trying to have a popup over a video tag, so I have

<div id="wrap" position="absolute" z-index="0">
 <video id="myVideo" width="1280" height="720" src="http://r18---sn-hpa7ln7k.googlevideo.com/videoplayback?source=youtube&sver=3&expire=1384698665&mv=m&mt=1384676899&ms=au&id=685317f1e97ad761&ratebypass=yes&ipbits=0&itag=22&fexp=907050,907724,923311,916623,936912,936910,923308,936913,907231,907240&key=yt5&ip=2001:1af8:4700:a022:1::4ae9&upn=xVxSRTsM2uI&sparams=id,ip,ipbits,itag,ratebypass,source,upn,expire&signature=4754BDE5BDD4614502F9232BC5C1896C8454ADAE.A8D51C5B2E4C4583B884B36E0B4D16B235AF6463&title=Dani+M+-+Agenda+%23r%C3%B6dnovember.mp4" type="video/mp4" style="position:absolute;top:0px;left:0px;z-index:10000;"  position="absolute" z-index="0" >
        Your browser does not support the video tag.
</video> 
</div>
<div class='overlay' z-index="2"></div>
<div class='dialog' id='dialog-0' z-index="2">


    <div class='container'>
        <h5>Please enter the PIN-code</h5>
        <div class='rowForm'>
            <div class='labelField'>PIN</div>
            <div class="inputField" id='item-1-0'></div><br />
        </div>
        <span class="error-msg" id="error-pin"></span>
        <div class='buttonBar'>
            <div class='button' id='item-1-1'>OK</div>
            <div class='button' id='item-1-2'>Cancel</div>
        </div>
    </div>
</div>

but the popup still is under the video, any idea why?

possible duplicate of [overlay opaque div over youtube iframe :)](http://stackoverflow.com/questions/3820325/overlay-opaque-div-over-youtube-iframe) — isherwood, Nov 19 '13 at 22:29

shshaw · Accepted Answer · 2015-12-23T18:14:04.833

z-index and position aren't HTML attributes. They need to be added in the CSS. Elements also must have a position setting like relative or absolute for the z-index to work.

Here's an example based on your HTML:

#wrap { position: absolute; z-index: 1; }
.overlay { position: relative; z-index: 2; }
.dialog { position: fixed: z-index: 3; }

Setting the styles in CSS is best, making your code easier to maintain and keeping file sizes down, but if you only have access to the HTML or if the styles are only needed on one element, you can use the style attribute directly on the elements:

<div id="wrap" style="position: absolute; z-index: 1;"> ... </div>
<div class="overlay" style="position: relative; z-index: 2"></div>
<div class="dialog" style="position: fixed; z-index: 3"> ... </div>

Floating div over video tag

1 Answers1