Elementor WordPress页面视频滚动到位置才播放的问题求助

我正在使用Elementor搭建网站，客户要求页面末尾的视频仅在用户滚动到该位置时播放。刚接触Elementor，在实现所需JavaScript时遇到困难。

现有代码 #

HTML #

<h1>Video Scroll Autoplay</h1>
<div class='scroll-spacer'><h2>Content</h2></div>
<div class='video-wrap'>
  <video autoplay muted playsinline loop poster="http://placehold.it/350x350">
    <source src="https://www.global-wrestling.com/wp-content/uploads/2022/11/Domination-1-Credits.mp4">
    <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
    Your browser does not support HTML5 video.
  </video>
</div>
<div class='scroll-spacer'><h2>Content</h2></div>

JavaScript #

window.addEventListener('load', videoScroll);
window.addEventListener('scroll', videoScroll);

function videoScroll() {

  if ( document.querySelectorAll('video[autoplay]').length > 0) {
    var windowHeight = window.innerHeight,
        videoEl = document.querySelectorAll('video[autoplay]');

    for (var i = 0; i < videoEl.length; i++) {

      var thisVideoEl = videoEl[i],
          videoHeight = thisVideoEl.clientHeight,
          videoClientRect = thisVideoEl.getBoundingClientRect().top;

      if ( videoClientRect <= ( (windowHeight) - (videoHeight*.5) ) && videoClientRect >= ( 0 - ( videoHeight*.5 ) ) ) {
        thisVideoEl.play();
      } else {
        thisVideoEl.pause();
      }

    }
  }

}

问题现状 #

目前代码单独运行正常，但将其作为HTML代码段添加到Elementor中，无论是通过<script src="locationofscript.js"></script>引入外部JS文件，还是内联添加JS代码，视频都会在页面加载时自动播放，无法实现滚动到位置才播放的效果，恳请各位提供帮助。

内容的提问来源于stack exchange，提问作者Scott Davies