on mobile the video does not load in chrome or safari - Follow Up Deployment

index.html

@@ -65,6 +65,11 @@
                 <p class="text-white/70 text-xl">Loading Nexus Robotics Experience</p>
             </div>
         </div>
+        <div id="mobilePlayOverlay" class="md:hidden absolute inset-0 flex items-center justify-center z-20 bg-black/30">
+            <button class="bg-white/20 backdrop-blur-sm rounded-full p-4 border-2 border-white/30">
+                <i class="fas fa-play text-white text-4xl"></i>
+            </button>
+        </div>
         <video id="bgVideo" autoplay loop playsinline muted class="w-full h-full object-cover" preload="auto" poster="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=">
             <source src="https://huggingface.co/spaces/akhaliq/nexusrobotics/resolve/main/Video_of_Robot_Washing_Dishes.mp4" type="video/mp4">
             <source src="https://huggingface.co/spaces/akhaliq/nexusrobotics/resolve/main/Video_of_Robot_Washing_Dishes.webm" type="video/webm">
@@ -125,10 +130,12 @@
     </section>
 
     <script>
-        // Enhanced video handling
+        // Enhanced video handling with mobile support
         document.addEventListener('DOMContentLoaded', function() {
             const video = document.getElementById('bgVideo');
             const fallback = document.getElementById('videoFallback');
+            const mobileOverlay = document.getElementById('mobilePlayOverlay');
+            const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
             
             // Show loading state initially
             fallback.classList.remove('hidden');
@@ -136,40 +143,70 @@
             // Check if video can play
             const canPlay = video.canPlayType('video/mp4') || video.canPlayType('video/webm');
             
+            // Handle mobile devices differently
+            if (isMobile) {
+                mobileOverlay.classList.remove('hidden');
+                video.muted = true;
+                video.autoplay = false;
+                video.removeAttribute('playsinline');
+            
             if (!canPlay) {
                 // No video support at all
                 video.style.display = 'none';
+                if (isMobile) mobileOverlay.style.display = 'none';
                 return;
             }
             
             // Try to play video with audio handling
             const tryPlay = () => {
+                if (isMobile) return;
+                
                 const playPromise = video.play();
                 
                 if (playPromise !== undefined) {
                     playPromise.then(() => {
                         // Video playing successfully
                         fallback.classList.add('hidden');
+                        if (isMobile) mobileOverlay.classList.add('hidden');
                     }).catch(error => {
                         // Final fallback if video can't play
                         video.style.display = 'none';
                         fallback.classList.remove('hidden');
+                        if (isMobile) mobileOverlay.classList.add('hidden');
                     });
                 }
             };
             
             // Start with muted video for autoplay compliance but unmute immediately
-            video.muted = true;
-            tryPlay();
-            video.muted = false;
+            if (!isMobile) {
+                video.muted = true;
+                tryPlay();
+                video.muted = false;
+            }
             
             // 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');
+                    if (isMobile) mobileOverlay.classList.add('hidden');
                 }
             }, 5000);
+            
+            // Mobile play button handler
+            if (isMobile) {
+                mobileOverlay.querySelector('button').addEventListener('click', () => {
+                    video.play()
+                        .then(() => {
+                            mobileOverlay.classList.add('hidden');
+                            fallback.classList.add('hidden');
+                        })
+                        .catch(e => {
+                            mobileOverlay.querySelector('i').className = 'fas fa-exclamation-triangle text-red-500 text-4xl';
+                            mobileOverlay.querySelector('button').classList.add('bg-red-500/20', 'border-red-500/30');
+                        });
+                });
+            }
         });
 
         // Simple animation for the join button