Vimeo iframe prevents scrolling

[lolmaus]

Hi!

We're using fullPage.js on our home page and we're embedding a full-screen Vimeo embed into one of the slides.

Everything works as a charm in Chrome, but in Firefox and iOS it is impossible to scroll 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.

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 and scrolling/swiping over it won't switch slides in Firefox and iOS.

[alvarotrigo]

It seems like a problem in Firefox with the mousewheel event as you can see here.

A workaround, kind of like a hack, would be to cover all the video except the center (because of the play button) with an invisible layer.
Or cover it all and autoplay the video.

Here's a demo.

[lolmaus]

Hey @alvarotrigo, thank you for replying.

---

It seems like a problem in Firefox with the mousewheel event as you can see here.

The suggested solution won't work because the iframe is cross-origin. Here's what Chrome says:

Blocked a frame with origin "http://localhost:3000" from accessing a frame with origin "http://player.vimeo.com". Protocols, domains, and ports must match.

---

A workaround, kind of like a hack, would be to cover all the video except the center (because of the play button) with an invisible layer.

I've already implemented the hole-in-the-center workaround, but it's hacky as hell. :(

---

Or cover it all and autoplay the video.

It is impossible to autoplay videos on mobile:

Uncaught Error: The viewer must initiate playback first.

---

Please reopen.

[alvarotrigo]

Please reopen.

I wouldn't consider this a problem or a bug in fullPage.js.
This is a problem of the propagation of the mousewheel or the touch ones in Firefox when using iFrames.

I would suggest you to try to find a solution in other place such as http://stackoverflow.com/.

It is quite unlikely we will find the proper solution for it here. It's a problem originated in Firefox, not in fullpage.js.

[lolmaus]

The same problem exists on all iOS devices and i believe it's a big deal.

[alvarotrigo]

I still recommending you to use other place to figure out the solution for it. You will find much better answers in places like stackoverflow.

Once a good solution is provided (if any), you can come back to comment it and then we could try to see if it is possible at all to implement it in fullPage.js.

[abidingbear]

I am experiencing a similar issue but also some of the vimeo videos on the page are playing sound but no video. If I disable fullpage.js they work fine.

Any updates in this issue?

Oh yeah, and thank you for such and amazing plugin!

[lolmaus]

Vimeo support operator claimed that she passed my bug report to their tech team, but they haven't replied since. :(

We've worked around the issue by overlaying the video with four transparent divs. I hate it, but i don't know a better solution.

[abidingbear]

That is a bummer man. I appreciate the info!

[MaggieRezo]

I opened a Stack Overflow question with this issue, I know the author thinks this isn't the place to answer the question but I leave the link here for future reference: http://stackoverflow.com/questions/29344162/fullscreen-video-doesnt-allow-scrolling-on-firefox

[graphiclaboratory]

Hello,
I try to stop automatically the vimeo player when moving to another section or slide?
It work perfectly for youtube iframe but for vimeo there is no function like this one :
//youtube videos
panel.find('iframe[src*="youtube.com/embed/"]').each(function(){
var element = $(this).get(0);
if( /youtube.com/embed//.test($(this).attr('src')) && !element.hasAttribute('data-keepplaying')){
$(this).get(0).contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}','*');
}
});

Here is the demo :
http://antek.be/wp-content/uploads/proto/index.html

Tks in advance,

[alvarotrigo]

@graphiclaboratory because Vimeo requires you to load a new script in your site. fullPage.js doesn't provide any option to deal with vimeo videos. But you can always do it by yourself by using callbacks and following the vimeo API.

[graphiclaboratory]

Oh, ok, i was thinking about api options but not good enough to use it, anyway tks a lot for answer me, i will find another solution.

tks a lot for everythings you did that amazing,
Antek

[bekharsky]

I have the same problem when using Fullpage.js with scrolloverflow plugin — can't scroll when mouse cursor is over youtube iframe.