Issue with video z-index on Windows browsers

Question

Having an issue with overlaying a png on a vimeo video, seem to have it working on all mac browsers but Firefox, Internet Explorer etc. on Windows seem to ignore it and place it behind.

This is the site example, it's the black 'Download Reel' button: http://www.warface.co.uk/clients/detail-shoppe

Many thanks

HTML

<div class="video-block">
<a class="download-reel left">Download Reel</a>
</div>

CSS

.download-reel {
   width:139px;
   height:32px;
   display:block;
   top:-5px;
   text-indent: -4000px;
   z-index: 11;
   position: absolute;
 }

and the video embed code:

<object width="720" height="405"><param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=11479633&amp;amp;server=vimeo.com&amp;amp;show_title=0&amp;amp;show_byline=0&amp;amp;show_portrait=0&amp;amp;color=15bedc&amp;amp;fullscreen=1" />
<embed src="http://vimeo.com/moogaloop.swf?clip_id=11479633&amp;amp;server=vimeo.com&amp;amp;show_title=0&amp;amp;show_byline=0&amp;amp;show_portrait=0&amp;amp;color=15bedc&amp;amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="720" height="405">
</embed></object>

Answer 1

By default an object/embed's wmode is "window", meaning it's layered over top of any browser element(s) other than the same elements.

You need to supply a wmode of "opaque" or "transparent", you usually want the latter.

<param name="wmode" value="transparent"> or <embed wmode="transparent"> depending on the element.

Answer 2

Z-index will only work on divs that have been positioned absolute or relative.

Also it sometimes won't work if you use it on the div if the div is nested within another. Try adding z-index and position:relative to the parent div, or the parent of that div.