如何在IE和Chrome的ajax彈出窗口圖層上修復YouTube Flash視頻重疊問題？

如果您轉到下面的網站，您會看到有一個YouTube視頻，但是如果您在以下任何產品上選擇添加到購物車按鈕，則會彈出一個窗口，顯示要添加到購物車的產品。但是，YouTube視頻通過它展示。這是Z索引問題，還是我需要在YouTube的嵌入代碼中添加一些標籤？該問題只發生在Chrome瀏覽器的Chrome & IE上。在任何瀏覽器的MAC上都不會發生這個問題。我沒有在Windows上檢查Safari。如何在IE和Chrome的ajax彈出窗口圖層上修復YouTube Flash視頻重疊問題？

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

下面是問題的一個屏幕截圖

This is a screenshot of the problem

來源

2011-04-19 Abby

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

而不是嵌入的YouTube的iframe這樣的：

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

add？wmode =透明的，像這樣的嵌入式鏈接：

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

這工作了魅力對我來說。

來源

2011-06-07 03:46:41

這個固定我的問題。謝謝 – 2012-10-26 18:11:27

非常感謝，喬斯 – 2013-04-30 09:43:45

不知道如何做到這一點與iframe嵌入，但Flash影片需要有一個附加參數：

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

Flash影片不會聽z-index，直到它有一個wmode。

來源

2011-04-19 15:11:39 locrizak

你可以解決它像這樣，通過將wmode設置爲「不透明」

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

來源

2011-04-19 15:13:46 ThomasM

$(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");} 
     } 
    }); 
});

這將修復鏈接到youtube的所有iframe的z-index。需要jQuery才能工作。將代碼粘貼到空白的js文件中並將其包含在源代碼中。希望這有助於

來源

2011-10-07 23:22:16 Shade

對於iframe嵌入動態加載西元YouTube的API（而不是硬編碼的iframe元素），你可以改變玩家的對象，像這樣：

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

     });

來源

2014-03-03 18:49:22

如何在IE和Chrome的ajax彈出窗口圖層上修復YouTube Flash視頻重疊問題？

回答

相關問題