jQuery: setting wmode to Youtube video for z-index handling

Question

I'm doing this:

//z-index of flash objects
$('object').prepend('<param name="wmode" value="opaque">');
$('object embed').attr('wmode', 'opaque');

So, when I inspect the youtube video on my page it says:

<object width="500" height="281">
<param name="wmode" value="opaque">
<param name="movie" value="http://www.youtube.com/v/KUi32-suXjY?version=3&amp;feature=oembed">
<param name="allowFullScreen" value="true">
<param name="allowscriptaccess" value="always">
<embed src="http://www.youtube.com/v/KUi32-suXjY?version=3&amp;feature=oembed" type="application/x-shockwave-flash" width="500" height="281" allowscriptaccess="always" allowfullscreen="true" wmode="opaque"></object>

I have draggable objects with fixed position and z-index:9999 on my page. However I have no change to make the youtube video stay behind this objects. The youtube video is always on top, even if I set the wmode.

Any idea what I'm doing wrong here?

Answer 1

<param name="wmode" value="transparent">

Or you can use the new youtube method to embed videos It'd be like:

<iframe class="youtube-player" type="text/html" width="481" height="295" src="http://www.youtube.com/embed/HgLviEa0YHo?wmode=transparent" frameborder="0"> </iframe>

and there it goes with the wmode attribute.

Answer 2

Have you tried wmode transparent?

That's what I've used. Not sure what the difference between opaque and transparent is in this context. Using Window Mode (wmode) values

Also not sure, but maybe this will help: difference between opaque and transparent