JS YouTube Embed 交换在不同 iOS 版本上不一致

Question

所以我正在开发一个移动网站，上面有一些视频。我使用提供的 YouTube API 在不同设备上的 Flash 和 HTML5 之间切换，但出于几个不同的原因，我使用自定义缩略图。

我使用一些 JavaScript 来隐藏 YouTube iframe，直到用户单击图片，然后应该将图像替换为视频 onClick，调用 switchItUp 方法。

        var video = document.getElementById("VideoID");
        var image = document.getElementById("PlaceholderImage");
        video.style.display = "none";

        function switchItUp() {
            var video = document.getElementById("VideoID");
            var image = document.getElementById("PlaceholderImage");
            image.style.display = "none";
            video.style.display = "block";
        }

API 指定的 YouTube 代码如下（仅在页面上运行）：

<iframe src="http://www.youtube.com/embed/BaKcl0Qg13o?autoplay=1" width="300" height="190"></iframe>

这是有趣的部分。

• 这在 4.0 版 Safari 中效果很好。
• 在 4.1 中，onClick 显示了视频，但无法播放。
• 在 4.2 中，视频根本不显示，但当图像隐藏时，页面上会留下巨大的空白。

它在所有桌面浏览器上都能很好地工作，因此调试这是一个问题。

任何帮助表示赞赏！蒂亚！

---

编辑： 播放器必须处于自动播放状态，才能在点击 1 次后进行交换，因此页面上必须以 display:none 的形式开始。

另外，容器会导致这个问题吗？它当前正在页面上的 内呈现，该页面在 display:none 之前没有设置 display:block。

Answer 1

尝试通过将视频放置在屏幕之外来隐藏视频，而不是使用 display=none。这是解决此类问题的经典方法。

video.style.position = 'absolute';
video.style.top = '-10000px';
video.style.left = '-10000px';

然后你可以“展示”它

video.style.position = 'static'

Answer 2

由于自动播放在 4.2 中不起作用，我们决定取消缩略图交换。没有一种方法可以在所有 iOS 版本上执行此操作。所以我们只是使用一些 YouTube 生成的缩略图。