Streaming live at 10am (PST)

Play/Pause/Restart HTML5 videos based on visibility

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 :
Here is the code :


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

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

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


window.addEventListener("resize", playVisibleVideos);
window.addEventListener("DOMContentLoaded", playVisibleVideos);

<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="" type="video/mp4">
<source src="" type="video/webm">

Thanks in advance for any help!

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

Did you find a solution? Thank you.

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