Only play video's when they are in viewport (#673)

Author: ngnijland

docs/src/components/Feature.astro

@@ -172,10 +172,9 @@ if (asset.alignment === "full-width") {
         />
       ) : (
         <video
-          class="image"
+          class="image js-feature-video"
           src={asset.path}
           aria-label={asset.alt}
-          autoplay
           muted
           playsinline
           loop

docs/src/components/Features.astro

@@ -40,3 +40,26 @@ const features = await Promise.all(
     ))
   }
 </section>
+
+<script>
+  // Play videos when they are in view, pause when they are not
+  const videos = document.querySelectorAll(".js-feature-video");
+
+  const observer = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        const videoElement = entry.target as HTMLVideoElement;
+        if (entry.isIntersecting) {
+          videoElement.play();
+        } else {
+          videoElement.pause();
+        }
+      });
+    },
+    { threshold: 1 },
+  );
+
+  videos.forEach((video) => {
+    observer.observe(video);
+  });
+</script>