views:

10064

answers:

2

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?

+33  A: 

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>
CMS
Ha! That did it. I'll have to read up to see why. Would have thought that making the player opaque might have the opposite effect if anything. Excellent!
Doug Kaye
+1 I wish that I saw this question 2 days ago :)
Darko Z
+1! What a lifesaver! Thanks, very much!
Till
It sucks that ad-networks do not, and sometimes REFUSE to, do this. They want their ads bleeding through...
eduncan911
Taht code worked for me in IE but not in firefox. I have the same code.
David García González
Awesomely life saver :)
Braveyard
+2  A: 

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' }
);
McNamron