Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Prevent iframe scroll capture on youtube iframe embed on chrome

I have a standard youtube embed iframe from a random video:

<iframe width="560" height="315" 
src="https://www.youtube.com/embed/ixJ5NbvXg_A" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>

I duplicated this a couple of times to get some scroll overflow.

<html>
<head></head>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Mm2eYfj0SgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Mm2eYfj0SgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Mm2eYfj0SgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Mm2eYfj0SgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Mm2eYfj0SgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Mm2eYfj0SgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</body></html>

When I serve this using django server on localhost the iframes prevent the page scroll.

When you move your cursor over a video and then use the mousewheel to scroll, it does not work.

The really funny thing is that when I paste the same code and save it to a local file on desktop. Then open it with chrome, the scroll works over youtube videos.

I checked in developer tools, the file served has exactly the same HTML. There is 100% no CSS or Javascript served, there are no templates, nothing. There is only a simple html file in both cases.

Version 71.0.3578.98 (Official Build) (64-bit)

like image 294
Vlad Otrocol Avatar asked Oct 27 '22 22:10

Vlad Otrocol


1 Answers

Try this one, the last reply - the https://github.com/alvarotrigo/fullPage.js/issues/2229

like image 95
Jacob Frunze Avatar answered Nov 01 '22 22:11

Jacob Frunze