这在任何浏览器中都能正常工作，但在 iOS6 上不行(没有在 iOS5 上尝试过)
我有一个带有 YouTube 视频的 iFrame，位于叠加层中。播放视频并切换叠加层后，视频再次损坏。视频将在后台播放(您会听到声音)，但不再可见。
这是一个最小的例子:
http://jsfiddle.net/s9M6J/2/
<script>
/* jQuery */
$(document).ready(function() {
$('a').click(function() {
$('.videowrapper').toggleClass('hidden');
});
});
</script>
<style>
.hidden{
display: none;
}
</style>
<body>
<a href="#" style="display: block;">toggleVideo</a>
<div style="background: green; width: 500px; height: 500px;">
<div class="videowrapper">
<div id="video1">
<iframe width="500" height="315" src="http://www.youtube.com/embed/HMrlFLZFdnQ" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</body>
有人知道解决方法吗？
最佳答案
在通过 javascript 显示/隐藏的 jQuery Mobile 页面上嵌入 Brightcove 视频时遇到类似问题。适用于所有桌面浏览器和 Android，但不适用于 iOS 6 上的 Safari。
根据 http://forum.brightcove.com/t5/General-Development/Video-in-show-hide-div-does-not-play-on-iOS/m-p/17558#M2352一个解决方法是通过使用一些 CSS 将它移出屏幕来隐藏你的 videowraper position:absolute;top:-9999px然后当你想显示它时回到正常定位。
对于 jQuery Mobile 用户，这意味着在多个 <div data-role="page"> 上嵌入视频 iframe在单个页面结构上不起作用，需要将它们放在单独的 html 页面上。
关于iOS6 Youtube iFrame 在隐藏并再次显示时中断，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13494130/