https://likeflow.ai/assets/product-video.js

1(() => {
2  const video = document.querySelector('[data-product-demo]');
3  if (!video) return;
4
5  const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
6  let isVisible = false;
7  video.muted = true;
8
9  function syncPlayback() {
10    if (!isVisible || document.hidden || reduceMotion.matches) {
11      video.pause();
12      return;
13    }
14    if (video.paused) {
15      // Autoplay can be blocked; native controls remain available.
16      video.play()?.catch(() => undefined);
17    }
18  }
19
20  // Start loading only when the demo enters the viewport.
21  if ('IntersectionObserver' in window) {
22    new IntersectionObserver(([entry]) => {
23      isVisible = entry.isIntersecting && entry.intersectionRatio >= 0.15;
24      syncPlayback();
25    }, { threshold: 0.15 }).observe(video);
26  }
27  document.addEventListener('visibilitychange', syncPlayback);
28  reduceMotion.addEventListener?.('change', syncPlayback);
29
30  // Video sources are selected at load time; reselect when the layout changes.
31  video.querySelectorAll('source[media]').forEach((source) => {
32    window.matchMedia(source.media).addEventListener('change', () => {
33      video.load();
34      syncPlayback();
35    });
36  });
37})();