Fullpage.js: Cursor over Youtube Iframe disable scroll

[mmalikov]

Description

When cursor over youtube iframe, scroll doesn't work

Link to isolated reproduction with no external CSS / JS

http://jsfiddle.net/q884Lv0a/

Steps to reproduce it

1. Scroll to the third section
2. Put the mouse cursor over youtube iframe
3. Try to scroll
   

   Versions

OS X El Captain 10.11.5

• Chrome 52.0.2743.116 (64-bit)
• Firefox 48.0

iOS 9.3.4

• Safari

[alvarotrigo]

Sounds like a bug of the browsers which doesn't propagate the scroll event inside iframes.
More info in this question too.

I'll close the issue as it seems there's no solution for it besides your own workarounds with a layer over the video?

See the console in this reproduction without fullpage.js in it. It won't capture scroll events when scrolling over the video element.

You can only trick the system by temporally covering the video with an invisible element after you click on "play".

Something among these lines:

• Add an overlay element over the video that covers the whole iframe element.
• Detect when they click over it to play it.
• Remove the overlay element over the video so they can interact with it (pause, move the timeline ettc)
• Detect when the video gets paused
• Add the overlay element again over the video.

[alvarotrigo]

@4z5lz of course you can. But you can't get the mouse wheel event as you can see in the Javascript console. Which is the problem here.

[qwik3r]

Soooo no solution on this?

[amityweb]

Anyone have a solution to this? I initially got excited by putting a transparent element over the top of the video, then scroll works, but buttons do not work underneath. So i then added pointe-events: none to the transparent layer, so clicking play button works, but that stops scroll again.

[alvarotrigo]

but buttons do not work underneath.

Use the youtube API. Bind a click event to the transparent one so when you click on it, it starts playing the video and removes the transparent element.
When stopping it, add the transparent element.

[amityweb]

I am using Smart Slider 3 to insert sliders and have inserted a video as a background video using that. I may be able to link buttons to events in it, but to be honest I dont have the time, so I have had to resort to a YouTube pop up in a lightbox due to not being able to scroll over a background one, which is a real shame.

[VictorChen]

Hi, I have the same problem. Is there a workaround if I can control the content of the iframe?

[webdevyaros]

Try my solution: https://jsfiddle.net/th0LxLbv/2/ - seems it works.

[alvarotrigo]

@webdevyaros it does not work in fullPage.js? See this http://jsfiddle.net/q884Lv0a/26/

[JohnConstantin]

Hi guys,
what you think about:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe,
https://www.w3schools.com/tags/att_iframe_scrolling.asp,
The <iframe> scrolling attribute is not supported in HTML5. Use CSS instead.,
scrolling,
iframe { scrolling:yes; }
I know by dev.mozilla, Deprecated. Not for use in new websites..