Play/Pause/Restart HTML5 videos based on visibility

Design help Custom code
1

Hello Webflowers, i am trying to implement a function to play a video once visible in the viewport I found a working solution but I cannot find how to restart / play the video at the beginning when out of view.

Here is the link : https://fabiens-radical-project-cf5036.webflow.io/grid
Here is the code :

<script> 

function playVisibleVideos() {
  document.querySelectorAll("video").forEach(video => elementIsVisible(video) ? video.play() : video.pause());
}

function elementIsVisible(el) {
  let rect = el.getBoundingClientRect();
  return (rect.bottom >= 0 && rect.right >= 0 && rect.top <= (window.innerHeight || document.documentElement.clientHeight) && rect.left <= (window.innerWidth || document.documentElement.clientWidth));
}

let playVisibleVideosTimeout;
window.addEventListener("scroll", () => {
  clearTimeout(playVisibleVideosTimeout);
  playVisibleVideosTimeout = setTimeout(playVisibleVideos, 100);

});

window.addEventListener("resize", playVisibleVideos);
window.addEventListener("DOMContentLoaded", playVisibleVideos);
</script>


<video loop muted controlsList="nodownload" preload="auto" video title="Fabien Bouadi, Motion designer freelance situé à Paris" playsinline autoplay width:100%; height: 100%; display:block; margin: 0 auto; object-fit: cover; class="video">
<source src="https://www.dropbox.com/s/rppqv23jl6dklsq/Showreel_Fabien_Bouadi_2019.mp4?raw=1" type="video/mp4">
<source src="https://www.dropbox.com/s/a5t4p5hu6nn4a9k/Showreel_Fabien%20Bouadi_%202019.webm?raw=1" type="video/webm">
<video>

Thanks in advance for any help!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Did you find a solution? Thank you.

3

You can try using the ScrollMagic.
I have done something similar with it.