CODEWITHSUNDEEP
jquerycssyoutubepositionwmode
matt
matt

Reputation: 44303

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?

Upvotes: 4

Views: 3203

Answers (2)

Mr_Nizzle
Mr_Nizzle

Reputation: 6714

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

Upvotes: 2

Simon Lang
Simon Lang

Reputation: 42675

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

Upvotes: 2

Related Questions