iOS6 Youtube iFrame 隐藏并再次显示时中断答案

【问题标题】：iOS6 Youtube iFrame breaks when hidden and displayed againiOS6 Youtube iFrame 隐藏并再次显示时中断
【发布时间】：2012-11-21 13:16:15
【问题描述】：

这在任何浏览器中都可以正常工作，但在 iOS6 上不行（没有在 iOS5 上尝试过）

我有一个 iFrame，里面有一个 YouTube 视频，位于叠加层中。播放视频并切换叠加层后，视频再次中断。视频将在后台播放（您会听到声音），但不再可见。

这是一个最小的例子：
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>

有人知道解决方法吗？

【问题讨论】：

标签： ios youtube

【解决方案1】：

在通过 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，一种解决方法是通过使用诸如position:absolute;top:-9999px 之类的CSS 将其移出屏幕来隐藏您的videowraper，然后在您想要显示它时恢复正常位置。

对于 jQuery Mobile 用户，这意味着在单个页面结构上的多个 <div data-role="page"> 上嵌入视频 iframe 将不起作用，需要将它们放在单独的 html 页面上。

【讨论】：