diff --git a/web/src/components/player/PreviewVideoPlayer.tsx b/web/src/components/player/PreviewVideoPlayer.tsx
index dfa263853..e6acaf931 100644
--- a/web/src/components/player/PreviewVideoPlayer.tsx
+++ b/web/src/components/player/PreviewVideoPlayer.tsx
@@ -104,11 +104,6 @@ export default function PreviewVideoPlayer({
         Math.floor(preview.end) <= timeRange.end,
     );
     setCurrentPreview(preview);
-
-    if (preview && previewRef.current) {
-      previewRef.current.load();
-    }
-
     controller.newPlayback({
       preview,
       timeRange,
@@ -118,6 +113,14 @@ export default function PreviewVideoPlayer({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [controller, timeRange]);
 
+  useEffect(() => {
+    if (!currentPreview || !previewRef.current) {
+      return;
+    }
+
+    previewRef.current.load();
+  }, [currentPreview, previewRef]);
+
   return (
     <div
       className={`relative ${className ?? ""} ${onClick ? "cursor-pointer" : ""}`}