Video is not playing sometime devices at all just a grey screen - Follow Up Deployment

index.html

@@ -59,9 +59,15 @@
 
     <!-- Video Background -->
     <div class="fixed inset-0 -z-10 overflow-hidden">
-        <video autoplay loop playsinline class="w-full h-full object-cover">
+        <div id="videoFallback" class="hidden w-full h-full bg-gradient-to-br from-gray-800 to-gray-900 flex items-center justify-center">
+            <div class="text-center">
+                <i class="fas fa-robot text-6xl text-white/50 mb-4"></i>
+                <p class="text-white/70 text-xl">Loading Nexus Robotics Experience</p>
+            </div>
+        </div>
+        <video id="bgVideo" 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">
+            <source src="https://huggingface.co/spaces/akhaliq/nexusrobotics/resolve/main/Video_of_Robot_Washing_Dishes.webm" type="video/webm">
         </video>
         <div class="absolute inset-0 bg-black/30"></div>
         <button id="soundToggle" class="absolute bottom-4 right-4 bg-white/20 hover:bg-white/30 rounded-full p-3 backdrop-blur-sm transition-all">
@@ -122,23 +128,49 @@
     </section>
 
     <script>
-        // Video autoplay fallback
+        // Enhanced video handling
         document.addEventListener('DOMContentLoaded', function() {
-            const video = document.querySelector('video');
+            const video = document.getElementById('bgVideo');
+            const fallback = document.getElementById('videoFallback');
+            
+            // Show loading state initially
+            fallback.classList.remove('hidden');
+            
+            // Check if video can play
+            const canPlay = video.canPlayType('video/mp4') || video.canPlayType('video/webm');
+            
+            if (!canPlay) {
+                // No video support at all
+                video.style.display = 'none';
+                return;
+            }
+            
+            // Try to play video
             const playPromise = video.play();
             
             if (playPromise !== undefined) {
-                playPromise.catch(error => {
+                playPromise.then(() => {
+                    // Video playing successfully
+                    fallback.classList.add('hidden');
+                }).catch(error => {
+                    // Video failed to play
                     video.style.display = 'none';
-                    const fallbackImg = video.querySelector('img');
-                    if (fallbackImg) fallbackImg.style.display = 'block';
+                    fallback.classList.remove('hidden');
                 });
             }
+            
+            // Fallback if video doesn't load within 5 seconds
+            setTimeout(() => {
+                if (video.readyState < 3) { // 3 = HAVE_FUTURE_DATA
+                    video.style.display = 'none';
+                    fallback.classList.remove('hidden');
+                }
+            }, 5000);
         });
 
         // Sound toggle functionality
         const soundToggle = document.getElementById('soundToggle');
-        const video = document.querySelector('video');
+        const video = document.getElementById('bgVideo');
         
         soundToggle.addEventListener('click', () => {
             video.muted = !video.muted;