A Vimeo <iframe> embed hijacks scrolling/swiping events

Question

We're using fullPage.js, it provides a slideshow-like experience. We're embedding a Vimeo iframe into one of the slides which should cover the whole are of the slide.

Everything works as a charm in Chrome, but in Firefox and iOS it is impossible to scroll/swipe over the Vimeo iframe. fullPage just won't react to it.

I tried covering the video with a transparent div. Again, it works in Chrome, but on iOS the browser would not allow you start the video programmatically, so covering the video with a div makes it unable to start the video: Vimeo player says "Uncaught Error: The viewer must initiate playback first."

Is there a solution for this issue?

Here's a demo of the problem: http://jsbin.com/tunove/1/edit?html,output The video is on the second slide. Scrolling/swiping over it won't switch slides in Firefox and iOS.

Answer 1

You may try this CSS solution:

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

Where element is you would put the vimeo embed class/id. I haven't tested this but I've had a similar issue with something else I had where the swipe action was stealing the scroll action. Hopefully it'll help in your case as well.