javascript - 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="" 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="" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="" 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)

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

<iframe width="560" height="315" 
src="https://www.youtube./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./embed/Mm2eYfj0SgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube./embed/Mm2eYfj0SgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube./embed/Mm2eYfj0SgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube./embed/Mm2eYfj0SgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube./embed/Mm2eYfj0SgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube./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)

Share Improve this question asked Dec 30, 2018 at 0:18 Vlad Otrocol 3,1907 gold badges35 silver badges56 bronze badges

You sure that django does not add anything else to the html when it's sent? Also what headers does Django send along with this simple html file? – kockburn Commented Jan 3, 2019 at 22:39

Add a ment |

4 Answers 4

Sorted by: Reset to default 1 +100

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

My particular issue was a bug in Chrome. It would get solved if I restart the browser.

You can try to change the css of body like

body{
    overflow: auto;
}

Sounds to me like a bug in the browser; here is a simple script that will prevent it from happening. It adds a scroll event to the window which disables pointer events on the iframes whenever the page is scrolling, then re-enables them 100ms after scrolling stops. Since the event is added in capture mode, it fires before the event can be caught by the iframe.

<script>

  (function() {

    var iframes, locked = null;
    window.addEventListener("scroll", scroll, true);

    function scroll(e) {

      if (!locked) {
        iframes = document.querySelectorAll('iframe');
        lock('none');
      }

      clearTimeout(locked);
      locked = setTimeout(function() {
        locked = null;
        lock('auto');
      }, 100);

    }

    function lock(value) {
      for (var i = 0; i < iframes.length; i++) {
        iframes[i].style.pointerEvents = value;
      }
    }

  })();

</script>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Prevent iframe scroll capture on youtube iframe embed on chrome - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)