All geek questions in one place

Vimeo <iframe> embeds hijacks in event scrolling / scrolling

We use fullPage.js , it provides slide shows. We embed the Vimeo iframe in one of the slides, which should cover all the slides.

Everything works like a charm in Chrome, but in Firefox and iOS it is not possible to scroll / scroll the Vimeo iframe. fullPage just doesn't respond to it.

I tried to cover the video with a transparent div. Again, it works in Chrome, but on iOS, the browser will not allow you to run the video programmatically, so covering the video with the div makes it impossible to start the video: Vimeo player says: "Uncaught Error: the viewer must first start playing."

Is there a solution for this problem?

Here is a demonstration of the problem: http://jsbin.com/tunove/1/edit?html,output The video is on the second slide. Scrolling / scrolling through it will not lead to switching slides in Firefox and iOS.

+5
source share
1 answer

You can try this CSS solution:

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

Where is the element, you should put vimeo embed class / id. I did not test this, but I had a similar problem with something else that I had when the swipe action distorted the scroll action. I hope this helps your case as well.

+1
source

Source: https://habr.com/ru/post/1205679/

More articles:


All Articles