對於IE10，每個標籤上的YouTube嵌入式覆蓋圖

我遇到了一個奇怪的問題，似乎無法找到解決方案。當嵌入Youtube視頻時，使用JqueryTools選項卡小部件或JqueryUI選項卡小部件，它會將其覆蓋在每個選項卡上。這隻發生在IE中，特別是使用IE10進行測試。有人知道爲什麼對於IE10，每個標籤上的YouTube嵌入式覆蓋圖

我創建了一個的jsfiddle更好地說明這個問題：http://jsfiddle.net/ncfbX/19/

編輯：

不讓我提交它，而不包括一些代碼，所以：

HTML: 

<div class="main"> 
    <div class="slides">Slides division</div> 

    <div id="tabs"> 
     <ul> 
      <li><a href="#tabs-1">tab1</a></li> 
      <li><a href="#tabs-2">tab2</a></li> 
      <li><a href="#tabs-3">tab3</a></li>    
     </ul> 
     <div id="tabs-1"> 
      <div class="inner_panel"> 
       <p>working</p> 
<iframe width="531" height="270" src="http://www.youtube.com/embed/7_nyhwuEX2c?rel=0" frameborder="0" allowfullscreen></iframe> 
      </div> 
     </div> 
     <div id="tabs-2"> 
      <div class="inner_panel"> 
       <p>Tab2 should not have a youtube video embedded.</p>  
      </div> 
     </div> 
     <div id="tabs-3"> 
      <div class="inner_panel"> 
       <p>Tab3 should not have a youtube video embedded.</p>     
      </div> 
     </div> 
    </div> 
</div>

CSS ：

.inner_panel{height:350px;}

JAVASCRIPT：

$(document).ready(function(){ 
    $('#tabs').tabs(); 
});

來源

2013-01-19 Alvin

這很可能是一個'Z-索引'問題... – Charlie

感謝您的建議查理。如果是這樣，從我的理解z-index必須每次點擊一個新的選項卡時更新。關於如何通過實現它而不需要編輯JqueryUI或JqueryTools原始源代碼的想法？ – Alvin

當您點擊新選項卡時，文字是否也會顯示，或僅顯示視頻？ – Charlie

好吧，我找到了解決，顯然它有一些東西需要與YouTube不尊重動態分配的z-index。

下標籤嵌入YouTube視頻時使用下面的代碼序得到它與IE10正常工作：在URL的末尾，的wmode =「不透明

<iframe title="YouTube video player" width="480" height="390" src="[YOUR_YOUTUBE_URL_HERE]?wmode=transparent" frameborder="0" wmode="Opaque">

的wmode =透明？「作爲一個額外的參數是什麼使它的工作。

來源

2013-01-20 06:51:36 Alvin

非常感謝！我在Chrome中遇到同樣的問題。 – juanpastas

作爲其他人的參考：我有同樣的問題，這種補救措施沒有爲我做的伎倆。 * did *工作是向URL添加？wmode = opaque，而不是？wmode = transparent，並且我不必向iframe添加屬性。顯然，答案適用於某些人，但如果你像我一樣，那麼也許我的解決方案可能會有所幫助。 – toon81

對於IE10，每個標籤上的YouTube嵌入式覆蓋圖

回答

相關問題