How do I fix a YouTube flash video overlay problem on a ajax popup window layer in IE & Chrome?

If you go to the site below, you will see there is a youtube video, but if you select the add to cart button on any of the products below, a popup window shows the product being added to the cart. However, the YouTube video shows through it. Is this a Z-inde开发者_JAVA百科x issue or do I need to add some tags into the embed code from YouTube? The problem is only happening in Windows on Chrome & IE. The problem does not happen on MAC in any browsers. I have not checked Safari on Windows.

http://www.unicornfibre.com/pages/Power-Scour-.html

Below is a screenshot of the problem

---

From http://www.scorchsoft.com/news/youtube-z-index-embed-iframe-fix:

Instead of embedding the youtube iframe like this:

<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/lzQgAR_J1PI" frameborder="0" wmode="Opaque">

add ?wmode=transparent to the embedded link like this:

<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" frameborder="0" wmode="Opaque">

This worked a charm for me.

---

$(document).ready(function ()
 {$('iframe').each(function()
     {var url = $(this).attr("src");
      var result = url.search(/youtube/i);
      if(result!=-1)
       {result = url.indexOf('?');
        if(result!=-1)  
          {$(this).attr("src",url+"&wmode=transparent");
          } else {$(this).attr("src",url+"?wmode=transparent");}
       }
     });
 });

This will fix z-index for all iframes linked to youtube. Requires jQuery in order to work. Paste the code in a blank js file and include it in the source code. Hope this helps

---

Not sure how to do this with the iframe embed but the flash movie needs to have an additional parameter:

wmode:"transparent" //instead of transparent you can also put opaque

The flash movie will not listen to z-index until it has a wmode on it.

---

you could fix it like this, by setting the wmode to "opaque"

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

---

For iframe embeds loading vids dynamically with youtube's api (rather than with hard-coded iframe elements), you can change the player object like so:

     player = new YT.Player('show', {
          height: '540',
          width: '960',
          videoId: firstID,
          playerVars: { rel:0,modestbranding:1, wmode: "transparent" },
          events: {
        'onStateChange': onPlayerStateChange
}

        });