let's try this

Author: rasyidcode

app/page.tsx

@@ -6,11 +6,28 @@ import { useEffect, useRef } from "react";
 export default function Page() {
   const videoRef = useRef<HTMLVideoElement>(null);
 
-  function unmuteVideo() {
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (videoRef.current) {
+          if (entries[0].isIntersecting) {
+            videoRef.current.play()
+            videoRef.current.muted = false
+          } else {
+            videoRef.current.pause()
+            videoRef.current.muted = true
+          }
+        }
+      },
+      { threshold: 0.7 } // 50% visible triggers play/pause
+    );
+
     if (videoRef.current) {
-      videoRef.current.muted = false;
+      observer.observe(videoRef.current);
     }
-  }
+
+    return () => observer.disconnect();
+  }, []);
 
   return (
     <>
@@ -22,7 +39,7 @@ export default function Page() {
             width={500}
             height={500} />
           <div>
-            <video ref={videoRef} onClick={unmuteVideo} className="cursor-pointer" loop autoPlay muted height="500" width="500">
+            <video ref={videoRef} loop autoPlay muted playsInline height="500" width="500">
               <source src="/never-gonna-give-up.mp4" type="video/mp4" />
             </video>
           </div>