diff --git a/src/components/player/AndroidVideoPlayer.tsx b/src/components/player/AndroidVideoPlayer.tsx
index eb9496c2..d26744e8 100644
--- a/src/components/player/AndroidVideoPlayer.tsx
+++ b/src/components/player/AndroidVideoPlayer.tsx
@@ -2321,9 +2321,24 @@ const AndroidVideoPlayer: React.FC = () => {
           </TapGestureHandler>
         </PanGestureHandler>
 
-        {/* Center area tap handler */}
+        {/* Center area tap handler - handles both show and hide */}
         <TapGestureHandler
-          onActivated={toggleControls}
+          onActivated={() => {
+            if (showControls) {
+              // If controls are visible, hide them
+              const timeoutId = setTimeout(() => {
+                hideControls();
+              }, 0);
+              // Clear any existing timeout
+              if (controlsTimeout.current) {
+                clearTimeout(controlsTimeout.current);
+              }
+              controlsTimeout.current = timeoutId;
+            } else {
+              // If controls are hidden, show them
+              toggleControls();
+            }
+          }}
           shouldCancelWhenOutside={false}
           simultaneousHandlers={[]}
         >
@@ -2333,7 +2348,7 @@ const AndroidVideoPlayer: React.FC = () => {
             left: screenDimensions.width * 0.4, // Start after left gesture area
             width: screenDimensions.width * 0.2, // Center area (20% of screen)
             height: screenDimensions.height * 0.7,
-            zIndex: 10,
+            zIndex: 5, // Lower z-index, controls use box-none to allow touches through
           }} />
         </TapGestureHandler>
 
diff --git a/src/components/player/VideoPlayer.tsx b/src/components/player/VideoPlayer.tsx
index 562e352a..133f2004 100644
--- a/src/components/player/VideoPlayer.tsx
+++ b/src/components/player/VideoPlayer.tsx
@@ -2133,9 +2133,24 @@ const VideoPlayer: React.FC = () => {
           </TapGestureHandler>
         </PanGestureHandler>
 
-        {/* Center area tap handler */}
+        {/* Center area tap handler - handles both show and hide */}
         <TapGestureHandler
-          onActivated={toggleControls}
+          onActivated={() => {
+            if (showControls) {
+              // If controls are visible, hide them
+              const timeoutId = setTimeout(() => {
+                hideControls();
+              }, 0);
+              // Clear any existing timeout
+              if (controlsTimeout.current) {
+                clearTimeout(controlsTimeout.current);
+              }
+              controlsTimeout.current = timeoutId;
+            } else {
+              // If controls are hidden, show them
+              toggleControls();
+            }
+          }}
           shouldCancelWhenOutside={false}
           simultaneousHandlers={[]}
         >
@@ -2145,7 +2160,7 @@ const VideoPlayer: React.FC = () => {
             left: screenDimensions.width * 0.4, // Start after left gesture area
             width: screenDimensions.width * 0.2, // Center area (20% of screen)
             height: screenDimensions.height * 0.7,
-            zIndex: 10,
+            zIndex: 5, // Lower z-index, controls use box-none to allow touches through
           }} />
         </TapGestureHandler>
 
diff --git a/src/components/player/controls/PlayerControls.tsx b/src/components/player/controls/PlayerControls.tsx
index 9c445e8c..2508c0db 100644
--- a/src/components/player/controls/PlayerControls.tsx
+++ b/src/components/player/controls/PlayerControls.tsx
@@ -78,8 +78,8 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({
   const { currentTheme } = useTheme();
   return (
     <Animated.View
-      style={[StyleSheet.absoluteFill, { opacity: fadeAnim }]}
-      pointerEvents={showControls ? 'auto' : 'none'}
+      style={[StyleSheet.absoluteFill, { opacity: fadeAnim, zIndex: 20 }]}
+      pointerEvents={showControls ? 'box-none' : 'none'}
     >
       {/* Progress slider with native iOS slider */}
       <View style={styles.sliderContainer}>