Ff3/Windows CSS Z-Index Problem with Youtube Player

FF3/Windows CSS z-index problem with YouTube player

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

(Note that it's included in both a <param> tag and a wmode attribute on the <embed> tag.)

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

popup behind youtube video

Add wmode="opaque" to the <object> / <embed> tag parameters and see if it helps.

Embedding Youtube video covers other divs

Had this problem myself a while back.

You need to add a wmode parameter with the value of opaque, ie wmode="opaque"

Problem with z-index

z-index is a relative, not an absolute value.

An object with z-index 10 billion will not appear on top of all elements on the page, only on top of other elements in the same stacking context

http://css-discuss.incutio.com/wiki/Overlapping_And_ZIndex

http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp

In the CSS hierarchy you posted, it looks like the button and div are contained in different elements (#note18 and #note19), so you'll have to make sure that those elements aren't creating different stacking contexts which will make any z-indexes for elements inside them irrelevant to each other.

Order in Internet Explorer

It looks like you might be dealing with a known bug:

“In Internet Explorer positioned elements generate a new stacking context, starting with a z-index value of 0. Therefore z-index doesn’t work correctly.”

You can see the bug report on Quirksmode website and a workaround explained in this blog post.

Essentially what you have to do is wrap it in an element with higher Z-index, for example
Here is a quick sketch of a workaround:

<div style="position: relative; z-index: 3000">
    <div style="position:absolute;z-index:1000;">
        ...
    </div>
</div>

z-index issue, Mask is over video?

Your page behaves exactly as it should.

The mask is an immediate child of the body tag, and it has a z-index of 1000.

Your video is an immediate child of an li in the anything slider that has a z-index of 1.

Therefore, even if your video itself has a z-index of 5000, it's within a stacking context that is lower (because 1 is lower than 1000) than your mask and, thus, appears behind your mask.

Best thing to do, if possible, is to make the dialog containing your video appear in the same stacking context as your mask (an immediate child of the body), if possible.

Z-INDEX Problem in IE7

Try this:

$("#orderBtn").click(function(){
    if(!visible) {

        if ($.browser.msie && $.browser.version.substr(0,1)<8) {
            $(".product").css('z-index','-2');
            $("#order").css('z-index','1');
            $("#dimmer").css('z-index','-1');
        }

        ... // do your other stuff

 } else {

        if ($.browser.msie && $.browser.version.substr(0,1)<8) {
            $(".product,#order,#dimmer").css('z-index','auto');
        }    

        ... // do your other stuff

 }
});

Lazy IE7 needs a z-index to all involved elements. This should work now, let me know.

---

Related Topics