diff --git a/client/src/components/video-card.tsx b/client/src/components/video-card.tsx
index 7ebba94..31742a3 100644
--- a/client/src/components/video-card.tsx
+++ b/client/src/components/video-card.tsx
@@ -48,15 +48,31 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
   const [showPreview, setShowPreview] = useState(false);
   const [isMuted, setIsMuted] = useState(true);
   const [showMoreInfo, setShowMoreInfo] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
+  const [isVideoPage, setIsVideoPage] = useState(false);
   const hoverTimeoutRef = useRef<NodeJS.Timeout>();
   const videoRef = useRef<HTMLVideoElement>(null);
   const hlsRef = useRef<Hls | null>(null);
   const [currentTime, setCurrentTime] = useState(0);
   const [duration, setDuration] = useState(0);
   
-  // Check if device is mobile and if we're on video page
-  const isMobile = window.innerWidth < 768;
-  const isVideoPage = window.location.pathname.startsWith('/video/');
+  // Check device type and page location
+  useEffect(() => {
+    const checkDevice = () => {
+      setIsMobile(window.innerWidth < 768);
+      setIsVideoPage(window.location.pathname.startsWith('/video/'));
+    };
+    
+    checkDevice(); // Initial check
+    
+    window.addEventListener('resize', checkDevice);
+    window.addEventListener('popstate', checkDevice);
+    
+    return () => {
+      window.removeEventListener('resize', checkDevice);
+      window.removeEventListener('popstate', checkDevice);
+    };
+  }, []);
 
   // Load mute preference on component mount
   useEffect(() => {