Play video when in view part

play_video_in_viewpart.js

document.addEventListener('DOMContentLoaded', function() {
  const video = document.getElementById('video-22_html5_api');  // SET your Video tag ID
  let previewStarted = false;

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

  function playPreview() {
    if (isElementInViewport(video) && !previewStarted) {
      video.currentTime = 0;
      video.play();
      previewStarted = true;

      setTimeout(() => {
        video.pause();
      }, 5000); // stop after 5 seconds
    } else if (!isElementInViewport(video) && previewStarted) {
      video.pause();
      previewStarted = false;
    }
  }

  window.addEventListener('scroll', playPreview);
  window.addEventListener('resize', playPreview);
});/* This is your custom Javascript */