Update index.html

index.html

@@ -38,28 +38,16 @@
             }
         }
 
-        // Cross-browser event listener for fullscreen change
-        function onFullscreenChange() {
+        // Add event listeners for focus and blur to detect fullscreen exit
+        const videoPlayer = document.getElementById('videoPlayer');
+        videoPlayer.addEventListener('webkitendfullscreen', hideVideoOnExit); // Specific to iOS Safari
+        videoPlayer.addEventListener('pause', hideVideoOnExit); // Additional fallback for mobile
+        videoPlayer.addEventListener('ended', hideVideoOnExit); // Hide when video ends (optional)
+
+        function hideVideoOnExit() {
             const videoContainer = document.getElementById('videoContainer');
-            const videoPlayer = document.getElementById('videoPlayer');
-            
-            // Check if exiting fullscreen mode
-            if (
-                !document.fullscreenElement && 
-                !document.webkitFullscreenElement && 
-                !document.mozFullScreenElement && 
-                !document.msFullscreenElement
-            ) {
-                videoContainer.style.display = 'none'; // Hide the video container
-                videoPlayer.pause(); // Pause the video
-            }
+            videoContainer.style.display = 'none'; // Hide the video container
         }
-
-        // Add event listeners for different browsers and platforms
-        document.addEventListener('fullscreenchange', onFullscreenChange);
-        document.addEventListener('webkitfullscreenchange', onFullscreenChange); // For Safari and iOS
-        document.addEventListener('mozfullscreenchange', onFullscreenChange); // For Firefox
-        document.addEventListener('MSFullscreenChange', onFullscreenChange); // For older IE/Edge
     </script>
 </body>
 </html>