javascript - 嵌入 youtube 视频在 iPhone 上有滚动问题

Question

当我在我的移动页面中嵌入 youtube 视频时，它会在 iPhone 中带来很多滚动问题(我猜，它也会在其他设备中出现同样的问题)。用户在点击视频本身时无法滚动页面。这是我用于嵌入的代码

<iframe width="270" height="152" frameborder="0" src="http://www.youtube.com/embed/nBJCbUMHna4?rel=0"></iframe>

我们能解决这个问题吗？例如，我们能否只显示视频的缩略图并在用户点击该图像时播放它。我认为当页面中出现图像而不是 iframe 时，滚动问题就会消失。

我试过使用 html5 版本的 youtube 视频，但似乎 iPhone 仍然以 flash 方式呈现视频。

 <iframe width="270" height="152" frameborder="0" src="http://www.youtube.com/embed/nBJCbUMHna4?rel=0&html5=True"></iframe>

Answer 1

下面的代码片段似乎在没有任何 JavaScript 技巧的情况下实现了这一目的。同时，这也确保您在 iOS 上获得良好的滚动动力。

*{
    -webkit-overflow-scrolling: touch;
}