Optimize video playback and fix hydration mismatch

MaheshThakur9152 · MaheshThakur9152 · commit a45afb61cdb1 · 2025-11-07T03:54:47.000Z
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -165,6 +165,7 @@ export default function RootLayout({
       </head>
       <body
         className={`${lora.variable} ${inter.variable} font-sans antialiased`}
+        suppressHydrationWarning={true}
       >
         {children}
         <WhatsAppFixed />
diff --git a/src/components/Statistics.tsx b/src/components/Statistics.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { motion } from 'framer-motion';
+import { useEffect, useRef, useState } from 'react';
 
 export default function Statistics() {
   const stats = [
@@ -10,6 +11,40 @@ export default function Statistics() {
     { number: "50+", label: "Service Locations" }
   ];
 
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const [isInView, setIsInView] = useState(false);
+  const [hasPlayed, setHasPlayed] = useState(false);
+
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting && !hasPlayed) {
+            setIsInView(true);
+            setHasPlayed(true);
+            // Start playing when in view
+            video.play().catch((error) => {
+              console.warn('Video autoplay failed:', error);
+            });
+          }
+        });
+      },
+      {
+        threshold: 0.1, // Trigger when 10% of video is visible
+        rootMargin: '50px' // Start loading 50px before entering viewport
+      }
+    );
+
+    observer.observe(video);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [hasPlayed]);
+
   return (
     <section className="py-20 md:py-28 bg-white">
       <div className="max-w-[1400px] mx-auto px-6 md:px-12">
@@ -25,12 +60,14 @@ export default function Statistics() {
           >
             <div className="h-48 sm:h-64 md:h-80 lg:aspect-[16/9] rounded-2xl overflow-hidden shadow-2xl bg-black">
               <video
-                autoPlay
+                ref={videoRef}
                 loop
                 muted
                 playsInline
+                preload={isInView ? "metadata" : "none"}
                 className="w-full h-full object-cover"
                 poster="/hero-1.jpg"
+                onError={(e) => console.error('Video failed to load:', e)}
               >
                 <source src="/ambe-service-video.mp4" type="video/mp4" />
                 Your browser does not support the video tag.

Original file line number	Diff line number	Diff line change
`@@ -165,6 +165,7 @@ export default function RootLayout({`
`165`	`165`	`</head>`
`166`	`166`	`<body`
`167`	`167`	className={`${lora.variable} ${inter.variable} font-sans antialiased`}
	`168`	`+ suppressHydrationWarning={true}`
`168`	`169`	`>`
`169`	`170`	`{children}`
`170`	`171`	`<WhatsAppFixed />`