Play About Step video only when visible

src/components/molecules/ProcessStep.svelte

@@ -34,7 +34,7 @@
                     alt={image.title}
                 />
             {:else if video}
-                <video autoplay muted loop playsinline allow="autoplay">
+                <video muted loop playsinline allow="autoplay">
                     <source type="video/mp4" src={getAssetUrlKey(video.mp4, 'step')} />
                     <source type="video/webm" src={getAssetUrlKey(video.webm, 'step')} />
                     <track kind="captions" />

src/routes/about/+page.svelte

@@ -29,6 +29,7 @@
     let scrollY: number, innerWidth: number, innerHeight: number
     let purposeEl: HTMLElement, stepsEl: HTMLElement, photosGridEl: HTMLElement
     let photoFirstEl: HTMLElement, photoUsEl: HTMLElement
+    let videosObserver: IntersectionObserver
     let photosGridOffset: number = photosGridEl && photosGridEl.offsetTop
 
     $: parallaxPhotos = photosGridEl && map(scrollY, photosGridOffset - innerHeight, photosGridOffset + innerHeight / 1.5, 0, innerHeight * 0.15, true)
@@ -170,6 +171,29 @@
                 opacity: [0, 0.2 + (0.05 * reverseIndex)]
             }), scrollOptions)
         })
+
+
+        /**
+         * Play videos only when visible
+         */
+        const videos = stepsEl.querySelectorAll('video')
+        if (videos) {
+            videosObserver = new IntersectionObserver(entries => {
+                entries.forEach(({ target, isIntersecting }) => {
+                    // @ts-ignore
+                    isIntersecting ? target.play() : target.pause()
+                })
+            }, {
+                threshold: 0,
+            })
+            videos.forEach(video => videosObserver.observe(video))
+        }
+
+
+        // Destroy
+        return () => {
+            videosObserver.disconnect()
+        }
     })
 
 
@@ -266,14 +290,13 @@
             <div class="steps grid" bind:this={stepsEl}
                 style:--cards-amount={about.process_steps.length}
             >
-                {#each about.process_steps as step, index}
+                {#each about.process_steps as { title, text, image, video_mp4, video_webm }, index}
                     <ProcessStep
-                        {...step}
+                        {index} {title} {text}
-                        index={index}
+                        image={image ?? undefined}
-                        image={step.image ?? undefined}
+                        video={video_mp4 && video_webm ? {
-                        video={step.video_mp4 && step.video_webm ? {
+                            mp4: video_mp4.id,
-                            mp4: step.video_mp4.id,
+                            webm: video_webm.id
-                            webm: step.video_webm.id
                         } : undefined}
                     />
                 {/each}
@@ -297,7 +320,7 @@
         <div class="container-wide">
             <div class="photos-grid" style:--parallax-y="{parallaxPhotos}px">
                 {#each photos as { image: { id }, title }, index}
-                    <AboutGridPhoto class="about-grid-photo"
+                    <AboutGridPhoto class="grid-photo"
                         {id}
                         alt={title}
                         disabled={fadedPhotosIndexes.includes(index)}