FF3/Windows CSS z-index problem with YouTube player

Question

I'm stuck on what appears to be a CSS/z-index conflict with the YouTube player. In Firefox 3 under Windows XP, Take a look at this page: http://spokenword.org/program/21396 Click on the Collect button and note that the pop-up <div> appears under the YouTube player. On other browsers the <div> appears on top. It has a z-index value of 999999. I've tried setting the z-index of the <object> element containing the player to a lower value, but that didn't work. Any idea how to get the pop-up to appear over the player?

Answer 1

Try to add the wmode parameter to be opaque like this:

<object width='425' height='344'> 
    <param name='movie' value='http://www.youtube.com/v/Wj_JNwNbETA&amp;hl=en&amp;fs=1'&gt; 
    <param name='type' value='application/x-shockwave-flash'> 
    <param name='allowfullscreen' value='true'> 
    <param name='allowscriptaccess' value='always'> 
    <param name="wmode" value="opaque" />
    <embed width='425' height='344'
            src='http://www.youtube.com/v/Wj_JNwNbETA&amp;hl=en&amp;fs=1'
            type='application/x-shockwave-flash'
            allowfullscreen='true'
            allowscriptaccess='always'
            wmode="opaque"
    ></embed> 
    </object>

Answer 2

We use jQuery Flash plugin to convert YouTube links to Flash movies. In this case, wmode is passed as an option in order to get the YouTube video to appear underneath the jQuery Dialog we open:

$('a[href^="http://www.youtube.com"]').flash(
    { width: nnn, height: nnn, wmode: 'opaque' }
);