Initial Commit

resources/js/composables/usePauseOffScreen.ts

@@ -11,12 +11,21 @@ export function usePauseOffscreen(
             (entries) => {
                 for (const entry of entries) {
                     const video = entry.target as HTMLVideoElement;
-                    if (!entry.isIntersecting && !video.paused) {
+                    if (entry.isIntersecting) {
+                        // Play whenever a video becomes visible — covers both
+                        // scrolling a post into view and navigating to a new
+                        // carousel slide (autoplay only fires once, on initial
+                        // mount, so it can't handle the latter on its own).
+                        video.play().catch(() => {
+                            // Autoplay can still be blocked by the browser;
+                            // leave it paused and let the user hit play.
+                        });
+                    } else if (!video.paused) {
                         video.pause();
                     }
                 }
             },
-            { threshold: 0.25 }, // pause once less than 25% of the video is visible
+            { threshold: 0.25 }, // play/pause around the 25% visible mark
         );
 
         const els = Array.isArray(videoRef.value)