So this will stop your video from playing on any scroll event. If you want it to stop playing if it has left the viewport you can look into using something like the IntersectionObserver API to do something if it is in the viewport (play the video) or outside of the viewport (stop the video).

Note: most modern browsers won't allow Javascript to start a video unless there has been at least some user interaction with the page already.

  const [playing, setPlaying] = useState(false);

  const videoRef = useRef(null);



  useEffect(() => {

    window.addEventListener('scroll', debounce(handleScroll, 200))



    return () => {

      window.removeEventListener('scroll', handleScroll);

    };

  }, []}



  const startVideo = () => {

    videoRef.current.pause();

    setPlaying(false);

  }



  const pauseVideo = () => {

    videoRef.current.play();

    setPlaying(true);

  }



  const handleScroll = (e) => {

    if (playing) {

      pauseVideo();

    }

  }



  const handleVideoPress = () => {

    if (playing) {

      startVideo();

    } else {

      pauseVideo();

    }

  };



  return (

    <div className="video">

      <video

        onClick={handleVideoPress}

        className="video__player"

        loop

        ref={videoRef}

        src={url}

      ></video>

    );

}

I made a working example of using the IntersectionObserver with React's ref hooks which can be found here:

https://codesandbox.io/s/strange-smoke-p9hmx

Please let me know if you have any more questions.