How do I get an element to cover a Flash video (tried wmode=transparent)?

Question

I have a Youtube video on my homepage, and now I need a modal to display on certain events.

For some reason, even when adding <param name="wmode" value="transparent"> to the Flash object, it still covers the HTML elements (with higher z-index too).

I've got it on JSfiddle.

I figured maybe an iframe could solve this, but that would require me to make a new page just to put the video on.

Am I doing something wrong?

Thanks

Update

Strangely, this behaviour happens on Windows Firefox and IE8. On Firefox on Mac, it renders fine.

Answer 1

You have both an embed and object. You need to apply the wmode to the embed.

http://jsfiddle.net/zCDVx/2/

<object width="640" height="385">
    <param name="movie" value="http://www.youtube.com/v/_-wDuGDtjCc?fs=1&amp;amp;hl=en_GB"&gt;
    <param name="wmode" value="transparent">
    <param name="allowscriptaccess" value="always">
    <embed src="http://www.youtube.com/v/_-wDuGDtjCc?fs=1&amp;amp;hl=en_GB" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385" wmode="transparent"></embed>
</object>

Answer 2

You need the wmode both as an object param and as part of the embed to work in all browsers.

<object width="640" height="385">
    <param name="movie" value="http://www.youtube.com/v/_-wDuGDtjCc?fs=1&amp;amp;hl=en_GB"&gt;
    </param>
    <param name="wmode" value="transparent"></param>
    <param name="allowscriptaccess" value="always"></param>
    <embed src="http://www.youtube.com/v/_-wDuGDtjCc?fs=1&amp;amp;hl=en_GB" type="application/x-shockwave-flash"
        allowscriptaccess="always" allowfullscreen="true" width="640" height="385" 
        wmode="transparent">
    </embed>
</object>

Notice the 2nd to last line.

See it here.