diff --git a/web/src/components/player/HlsVideoPlayer.tsx b/web/src/components/player/HlsVideoPlayer.tsx
index 1a9b1d8b9..f8cb3b34c 100644
--- a/web/src/components/player/HlsVideoPlayer.tsx
+++ b/web/src/components/player/HlsVideoPlayer.tsx
@@ -22,6 +22,7 @@ type HlsVideoPlayerProps = {
   className: string;
   children?: ReactNode;
   videoRef: MutableRefObject<HTMLVideoElement | null>;
+  visible: boolean;
   currentSource: string;
   onClipEnded?: () => void;
   onPlayerLoaded?: () => void;
@@ -32,6 +33,7 @@ export default function HlsVideoPlayer({
   className,
   children,
   videoRef,
+  visible,
   currentSource,
   onClipEnded,
   onPlayerLoaded,
@@ -137,7 +139,7 @@ export default function HlsVideoPlayer({
 
   return (
     <div
-      className={`relative`}
+      className={`relative ${visible ? "visible" : "hidden"}`}
       onMouseOver={
         isDesktop
           ? () => {
diff --git a/web/src/components/player/dynamic/DynamicVideoPlayer.tsx b/web/src/components/player/dynamic/DynamicVideoPlayer.tsx
index 1aaa0d7b7..62f087cfb 100644
--- a/web/src/components/player/dynamic/DynamicVideoPlayer.tsx
+++ b/web/src/components/player/dynamic/DynamicVideoPlayer.tsx
@@ -167,8 +167,9 @@ export default function DynamicVideoPlayer({
   return (
     <div className={`relative ${className ?? ""}`}>
       <HlsVideoPlayer
-        className={`w-full ${isScrubbing || isLoading ? "hidden" : "visible"} ${grow ?? ""}`}
+        className={`w-full ${grow ?? ""}`}
         videoRef={playerRef}
+        visible={!(isScrubbing || isLoading)}
         currentSource={source}
         onTimeUpdate={onTimeUpdate}
         onPlayerLoaded={onPlayerLoaded}