Vimeo <iframe>嵌入了劫持滚动/滑动事件

Question

我们使用的是fullPage.js,它提供了类似幻灯片的体验.我们将Vimeo iframe嵌入其中一个幻灯片中,这些幻灯片应该覆盖幻灯片的整个幻灯片.

一切都像Chrome中的魅力一样,但在Firefox和iOS中,无法滚动/滑动Vimeo iframe.fullPage只是不会对它做出反应.

我尝试用透明的div覆盖视频.同样,它适用于Chrome,但在iOS上,浏览器不允许您以编程方式启动视频,因此使用div覆盖视频会导致无法启动视频:Vimeo播放器说"未捕获错误:观看者必须首先启动播放. "

这个问题有解决方案吗？

以下是该问题的演示:http://jsbin.com/tunove/1/edit？html,output该视频位于第二张幻灯片上.滚动/滑动它不会在Firefox和iOS中切换幻灯片.

Answer 1

你可以尝试这个 CSS 解决方案：

element {
    touch-action: pan-y !important;
}

在 element 所在的位置，您可以放置​​ vimeo 嵌入类/id。我还没有测试过这个，但我也遇到过类似的问题，其中滑动操作窃取了滚动操作。希望它对您的情况也有帮助。