IE10的每个标签上都嵌入了YouTube叠加层 [英] YouTube embedded overlays on each tab for IE10
问题描述
我遇到了一个奇怪的问题,似乎无法找到解决方案。嵌入Youtube视频时,使用JqueryTools选项卡小部件或JqueryUI选项卡小部件,它会将其覆盖在每个选项卡上。这仅发生在IE中,特别是使用IE10进行测试。谁知道为什么?
I am running into a weird issue and can't seem to find a solution. Using either JqueryTools tabs widget or JqueryUI tabs widget when a Youtube video is embedded it keeps overlaying it on every tab. This only occurs in IE, specifically tested with IE10. Anyone know why?
我创建了一个jsfiddle来更好地说明这个问题: http ://jsfiddle.net/ncfbX/19/
I created a jsfiddle to better illustrate this issue: http://jsfiddle.net/ncfbX/19/
修改:
不允许我提交它而不包含一些代码,所以:
Wouldn't let me submit it without including some code, so:
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();
});
推荐答案
好吧我找到了修复,显然它有一些东西给使用Youtube不遵守动态分配的z-index。
Alright I found a fix, apparently it had something to do with Youtube not respecting the dynamically assigned z-index.
在标签下嵌入Youtube视频时使用以下代码,以使其与IE10一起正常工作:
Use the following code when embedding a Youtube video under tabs inorder to get it to work correctly with IE10:
<iframe title="YouTube video player" width="480" height="390" src="[YOUR_YOUTUBE_URL_HERE]?wmode=transparent" frameborder="0" wmode="Opaque">
?wmode = transparent wmode =不透明作为一个额外的参数是它的工作原理。
?wmode=transparent at the end of the URL and wmode="Opaque" as an extra parameter is what makes it work.
这篇关于IE10的每个标签上都嵌入了YouTube叠加层的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!