swipe down event over youtube player about fullpage.js

[alvarotrigo]

This is a limitation on the browser side.
The parent page can't capture events that happens on the child page (the youtube iframe embed)

It's a duplicate of this issue.

The solution is to use your CSS solution using pointer-events together with some JS that disables them when the user clicks on the video. So at least the 2nd click the user does will be effective :)

Another workaround as suggested in the referenced issue, is using an overlay.

[halukkaramete]

Dear Alvaro, It does not seem like a browser issue. I checked the link referred in this post ( #2229 ) you can definitely scroll or swipe down on the playing video and the page scrolls. ( You replied there as, "See the console in this reproduction without

fullpage.js in it <http://jsfiddle.net/q884Lv0a/3/>. It won't capture scroll events when scrolling over the video element". )

The Entire youtube shorts phenomena ( https://www.youtube.com/shorts ) is the best example of this. In fact, I was trying to imitate that UI with the fullpage. Which I achieved (but at the expense of blocking access to the youtube iframe ). Which youtube may not appreciate. This seems like browsers' basic behaviour. Otherwise, those examples would not have worked. It appears to me that fullpage CSS or events are introducing something for this to occur? Please do some tests and we'll talk again. If I can find a fix, I'll share it with you too. Thank you

…

On Mon, Jan 15, 2024 at 2:57 PM Álvaro ***@***.***> wrote: Closed #4600 <#4600> as completed. — Reply to this email directly, view it on GitHub <#4600 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA6X2J22OVGMJYLEUDX3Z3DYOUKSJAVCNFSM6AAAAABB3AFN2KVHI2DSMVQWIX3LMV45UABCJFZXG5LFIV3GK3TUJZXXI2LGNFRWC5DJN5XDWMJRGQ4DOMZUGQYDENY> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[alvarotrigo]

The Entire youtube shorts phenomena ( https://www.youtube.com/shorts ) is the best example of this.

Not a great example.
They are not using iframes (embeds). And even if they did, they are iframes on the same domain so there's no cross domain policies in place there. (although I'm not even sure this matters...)

It appears to me that fullpage CSS or events are introducing something for
this to occur?

Nope.
I already explained the problem. fullPage.js can't have access to the events fired inside an iframe.

You can read more on this Mozilla issue.

[alvarotrigo]

Here you have full reproduction of the issue proving it's a browser limitation:
https://jsfiddle.net/8cj0dofx/1/

But hey, if you know how to overcome it, I'll be all ears :)

[halukkaramete]

I will try... But...

> They are not using iframes.

Each youtube video is an iframe.

> Here you have full reproduction of the Here you have full reproduction

of the issue proving it's a browser limitation: https://jsfiddle.net/8cj0dofx/1/ When the iframe content is all scrolled down (or the iframe content is cut to the exact size as the iframe itself ) as in ALL of the youtube videos ( which are basically I frames with the exact size of the video they host), the scrolling definitely occurs. In my examples, ( or in any embedded iframe that you see on the web, the iframe is cut to the exact size of the content -- which means browsers know what to do when iframe got nothing to scroll down. ) You can try this... Put this iframe in a fullpage and on a regular page... <iframe width="366" height="650" src=" https://www.youtube.com/embed/w7VvYhfUVHk" title="rocket backhand block" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> you will see that scrolling/swipping down on this very same iframe will demonstrate my point. fullpage will not scroll but the normal page will scroll.

…

On Mon, Jan 15, 2024 at 5:20 PM Álvaro ***@***.***> wrote: Here you have full reproduction of the issue proving it's a browser limitation: https://jsfiddle.net/8cj0dofx/1/ But hey, if you know how to overcome it, I'll be all ears :) — Reply to this email directly, view it on GitHub <#4600 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA6X2J6DSGMF4Y3UZM6ZJO3YOU3KLAVCNFSM6AAAAABB3AFN2KVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQOJSGI3DGNRUHA> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[alvarotrigo]

Let me know once you manage to capture mousewheel events on the iframe of this example:
https://jsfiddle.net/8cj0dofx/1/

Once you do that, I'll be happy to implement it in fullPage ;)

Until then, I'm afraid I can't really help you any further.

[halukkaramete]

That's not possible, that I get it ... But that's not the problem I'm referring to. We're talking strictly youtube embed iframes. I will see what can be done about it. It has become a show stopper for me. I was just about to finish implementing a UI that mimics the youtube shorts interface.

…

On Mon, Jan 15, 2024 at 5:45 PM Álvaro ***@***.***> wrote: Let me know once you manage to capture mousewheel events on the iframe of this example: https://jsfiddle.net/8cj0dofx/1/ Once you do that, I'll be happy to implement it in fullPage ;) Until then, I'm afraid I can't really help you any further. — Reply to this email directly, view it on GitHub <#4600 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA6X2J5E7BWKZDMGSXFPUGLYOU6ILAVCNFSM6AAAAABB3AFN2KVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQOJSGMYDQNRWHE> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[alvarotrigo]

We're talking strictly youtube embed iframes.

Feel free to replace the iframe for a youtube embed. It won't matter.
The mousewheel event won't get propagated either.