使用youtube源显示/隐藏Mobile Safari和iframe

Question

我正在移动Safari中编写一个网络应用程序，我似乎对我认为应该足够简单的事情感到困惑，尽管它现在正在躲避我。

基本上，我有一个iframe，其中包含src YouTube视频。当有人点击一个兴趣点时，它会以一种小模态显示该视频。它还有一个关闭的关闭按钮。

这只使用jQuery的show和hide方法。字面上：

$(".selector").on("click", function() {

    $(this).show();

});

和

$(".selector").on("click", function() {

    $(this).hide();

});

当模式出现时，用户必须点击YouTube视频才能播放。一切都很好。

当你关闭它并尝试再次打开它时，这个奇怪的部分会起作用。弹出模式，但视频为空白。只有一个黑屏，但仍可以播放视频。

我猜这与window创建的其他iframe上下文有关。也许这隐藏了那个特定树中的其他东西？

当我在桌面上测试我的移动代码时，它运行正常，我没有任何问题。 iPhone上的测试没有。

关于这个的任何想法??

Answer 1

好的，解决了这个问题，但这很奇怪。显然，这是旧版桌面版Safari中的一个已知问题。对于任何遇到问题的人来说，这是一个解决方案。

像这样设置你的iFrame：

<iframe id="myYTVideo" src="" frameborder="0" allowfullscreen></iframe>

注意没有添加src属性。当您使用jQuery打开模态时，请执行以下操作：

$(".openButtonSelector").on("click", function() {
    $("#myYTVideo").show();
    $("#myYTVideo").attr("src", youryoutubesourcehere);
});

关闭它时，请执行以下操作：

$(".closeButtonSelector").on("click", function() {
    $("#myYTVideo").hide();
    $("#myYTVideo").attr("src", "");
});

不是最迷人的解决方案，但它确实有效。不知道为什么它会在随后的电话中搞砸。我想这肯定是一个移动Safari漏洞。