Is it possible to position a transparent button over an embeded mpeg video?

I can move them around but when the page loads, it seems the buttons are behind the movie.

I've tried z-index but I'm sure I'm not doing it right. Code is below but the link is http://www.ba-doyn.com/junk/video/

The css:
* {
        margin: 0;
        padding: 0;
}
html {
        min-height: 100%;
        margin-bottom: 1px;
}
body {
        text-align: center;
}
#page-wrap {
        text-align: left;
        width: 960px;
        margin: 0 auto;
}
#video  {
}
#button1  {
        background-color: #FF0000;
        height: 25px;
        width: 75px;
        position: relative;
        top: -200px;
        left: 150px;
        z-index: 100;
}
#button2 {
        background-color: #0033FF;
        height: 25px;
        width: 75px;
        position: relative;
        top: -150px;
        left: 150px;
        z-index: 100;
}
.clear {
        clear: both;
}

The html:
<body>
<div id="page-wrap">
  <div id="video">
<embed src="final_hsbvideo_12-8.mpg" width="480" height="375"></ embed>
    <div id="button1">button1</div>
    <div id="button2">button2</div>
  </div>
</div>
</body>

Thanks,
Michael


______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Reply via email to