Search code examples
jquerycssyoutubepositionwmode

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

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?

Solution 
  • <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.