video does not play on mobile safari and chrome - Follow Up Deployment

index.html

@@ -59,8 +59,9 @@
 
     <!-- Video Background -->
     <div class="fixed inset-0 -z-10 overflow-hidden">
-        <video autoplay loop playsinline class="w-full h-full object-cover">
+        <video autoplay loop playsinline muted class="w-full h-full object-cover">
             <source src="https://huggingface.co/spaces/akhaliq/nexusrobotics/resolve/main/Video_of_Robot_Washing_Dishes.mp4" type="video/mp4">
+            <img src="fallback-image.jpg" alt="Nexus Robotics" class="w-full h-full object-cover">
         </video>
         <div class="absolute inset-0 bg-black/30"></div>
     </div>
@@ -118,6 +119,20 @@
     </section>
 
     <script>
+        // Video autoplay fallback
+        document.addEventListener('DOMContentLoaded', function() {
+            const video = document.querySelector('video');
+            const playPromise = video.play();
+            
+            if (playPromise !== undefined) {
+                playPromise.catch(error => {
+                    video.style.display = 'none';
+                    const fallbackImg = video.querySelector('img');
+                    if (fallbackImg) fallbackImg.style.display = 'block';
+                });
+            }
+        });
+
         // Simple animation for the join button
         document.querySelectorAll('.join-btn').forEach(button => {
             button.addEventListener('mouseenter', () => {