Today I have been battling away with various hacks/fixes and CSS additions to prevent my CSS based dropdown menu falling behind embedded Youtube clips on Safari and Chrome on PC.

I tried the general wmode=”transparent” and such but for whatever reason it just did not want to work, after much playing around I found something works pretty well (with the help of Nyan Cat!)

So the standard Youtube embed code looks something like this (I tidied it to make it more legible):

<object width="480" height="360">
<param name="movie" value="http://www.youtube.com/v/QH2-TGUlwu4?version=3&amp;hl=en_US&amp;rel=0"></param>
<param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/QH2-TGUlwu4?version=3&amp;hl=en_US&amp;rel=0" type="application/x-shockwave-flash" width="480" height="360" allowscriptaccess="always" allowfullscreen="true">
</embed></object>

I did this to force the dropdown in front:

<object width="480" height="360" class="lame-fix">
<param name="wmode" value="transparent">
<param name="movie" value="http://www.youtube.com/v/QH2-TGUlwu4?version=3&amp;hl=en_US&amp;rel=0"></param>
<param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/QH2-TGUlwu4?version=3&amp;hl=en_US&amp;rel=0" type="application/x-shockwave-flash" width="480" height="360" allowscriptaccess="always" allowfullscreen="true" wmode="transparent">
</embed></object>

I added a new param after the opening object:

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

I then placed:

wmode="transparent"

At the end of the embed.

I also added a new CSS class in the opening object

class="lame-fix"

I then added this in to the stylesheet:

.lame-fix {
z-index:-1;
}

I saved all my files and when I refreshed the page it worked! This might not be the best fix out there, but hopefully it helps someone.

Or if anyone can offer up a better solution that would be superb!