A Vimeo <iframe> Einbetten Hijacks Scrollen/Wischen Ereignisse

Question

Wir verwenden fullPage.js, es bietet eine Diashow-ähnliche Erfahrung. Wir integrieren einen Vimeo-Iframe in eine der Folien, die die gesamte Fläche der Folie abdecken sollen.

In Chrome funktioniert alles wie ein Zauber, aber in Firefox und iOS ist es unmöglich, über den Vimeo-Iframe zu blättern/zu wischen. fullPage wird einfach nicht darauf reagieren.

Ich habe versucht, das Video mit einem transparenten div abzudecken. Wieder funktioniert es in Chrome, aber unter iOS lässt es der Browser nicht zu, dass das Video programmgesteuert gestartet wird. Wenn das Video mit einem Div abgedeckt wird, kann das Video nicht gestartet werden: Vimeo Player sagt "Uncaught Error: Der Viewer muss zuerst die Wiedergabe starten. "

Gibt es eine Lösung für dieses Problem?

Hier ist eine Demo des Problems: http://jsbin.com/tunove/1/edit?html,output Das Video ist auf der zweiten Folie. Beim Scrollen/Überstreichen werden die Folien in Firefox und iOS nicht umgeschaltet.

Answer 1

Sie können diese CSS-Lösung versuchen:

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

Wo Element ist, dass Sie die vimeo einbetten Klasse/id setzen würde. Ich habe das nicht getestet, aber ich hatte ein ähnliches Problem mit etwas anderem, wo die Wischaktion die Scroll-Aktion gestohlen hat. Hoffentlich hilft es auch in Ihrem Fall.