diff --git a/web/src/components/player/HlsVideoPlayer.tsx b/web/src/components/player/HlsVideoPlayer.tsx
index 55c175496..11207d233 100644
--- a/web/src/components/player/HlsVideoPlayer.tsx
+++ b/web/src/components/player/HlsVideoPlayer.tsx
@@ -48,8 +48,8 @@ export default function HlsVideoPlayer({
   const [loadedMetadata, setLoadedMetadata] = useState(false);
 
   const handleLoadedMetadata = useCallback(() => {
+    setLoadedMetadata(true);
     if (videoRef.current) {
-      setLoadedMetadata(true);
       if (setLiveResolution) {
         setLiveResolution({
           width: videoRef.current.videoWidth,
diff --git a/web/src/views/events/RecordingView.tsx b/web/src/views/events/RecordingView.tsx
index bf93ea532..b12b3a662 100644
--- a/web/src/views/events/RecordingView.tsx
+++ b/web/src/views/events/RecordingView.tsx
@@ -190,9 +190,18 @@ export function RecordingView({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentTime, scrubbing]);
 
+  const [liveResolution, setLiveResolution] = useState<VideoResolutionType>({
+    width: 0,
+    height: 0,
+  });
+
   const onSelectCamera = useCallback(
     (newCam: string) => {
       setMainCamera(newCam);
+      setLiveResolution({
+        width: 0,
+        height: 0,
+      });
       setPlaybackStart(currentTime);
     },
     [currentTime],
@@ -200,11 +209,6 @@ export function RecordingView({
 
   // motion timeline data
 
-  const [liveResolution, setLiveResolution] = useState<VideoResolutionType>({
-    width: 0,
-    height: 0,
-  });
-
   const getCameraAspect = useCallback(
     (cam: string) => {
       if (!config) {