From b400bd4b96f2e54c9521b2488f84310e238c07b0 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 13 Mar 2026 11:20:52 +0000
Subject: [PATCH 1/3] Fix History preview video stretch by restoring contain as
 default object-fit

The MSE player default was set to 'fill' which stretches video in all contexts.
Only the draggable grid should use 'cover' (via --frigate-mse-object-fit:cover).
Changing the fallback to 'contain' restores aspect-ratio-preserving behaviour
everywhere else (History preview, etc.) while keeping the grid fill intact.

https://claude.ai/code/session_01EwdaKGsrRLZ74smmCQ1MgW
---
 web/src/components/player/MsePlayer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/player/MsePlayer.tsx b/web/src/components/player/MsePlayer.tsx
index 382c879f8..767f16e3a 100644
--- a/web/src/components/player/MsePlayer.tsx
+++ b/web/src/components/player/MsePlayer.tsx
@@ -849,7 +849,7 @@ function MSEPlayer({
       className={className}
       style={{
         objectFit:
-          "var(--frigate-mse-object-fit, fill)" as CSSProperties["objectFit"],
+          "var(--frigate-mse-object-fit, contain)" as CSSProperties["objectFit"],
         transform:
           "var(--frigate-mse-grid-rotation, none)" as CSSProperties["transform"],
         transformOrigin:

From 93a5f2691c5fdd657961c0bcec733c334d620d45 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 13 Mar 2026 11:24:08 +0000
Subject: [PATCH 2/3] Use fill object-fit in draggable grid, contain elsewhere

Grid tiles explicitly set --frigate-mse-object-fit:fill so video stretches
to fill the card without preserving aspect ratio. The MsePlayer default
is contain, so History preview and all other contexts keep correct proportions.

https://claude.ai/code/session_01EwdaKGsrRLZ74smmCQ1MgW
---
 web/src/views/live/DraggableGridLayout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/views/live/DraggableGridLayout.tsx b/web/src/views/live/DraggableGridLayout.tsx
index ee57758b2..8ffd585fe 100644
--- a/web/src/views/live/DraggableGridLayout.tsx
+++ b/web/src/views/live/DraggableGridLayout.tsx
@@ -846,7 +846,7 @@ export default function DraggableGridLayout({
                         useWebGL={useWebGL}
                         cameraRef={cameraRef}
                         className={cn(
-                          "draggable-live-grid-mse-cover size-full rounded-lg bg-black md:rounded-2xl",
+                          "draggable-live-grid-mse-cover size-full rounded-lg bg-black [--frigate-mse-object-fit:fill] md:rounded-2xl",
                           camera.ui?.rotate &&
                             "draggable-live-grid-rotated [--frigate-mse-grid-rotated:1] [--frigate-mse-grid-rotation:rotate(90deg)]",
                           isEditMode &&

From abcb31e30c79d6b120545ec2100d3069c06d7110 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 13 Mar 2026 11:39:52 +0000
Subject: [PATCH 3/3] Fix History preview video stretch by adding
 object-contain

PreviewVideoPlayer's <video> had no explicit object-fit, so browsers
applied the CSS default (fill), stretching the video when the container
aspect ratio (detect resolution) didn't match the actual preview video.
Adding object-contain preserves aspect ratio in the recording/history view.

https://claude.ai/code/session_01EwdaKGsrRLZ74smmCQ1MgW
---
 web/src/components/player/PreviewPlayer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/player/PreviewPlayer.tsx b/web/src/components/player/PreviewPlayer.tsx
index 2a831fc6b..f7b4542c5 100644
--- a/web/src/components/player/PreviewPlayer.tsx
+++ b/web/src/components/player/PreviewPlayer.tsx
@@ -303,7 +303,7 @@ function PreviewVideoPlayer({
       {isVisible && (
         <video
           ref={previewRef}
-          className={`absolute size-full ${currentHourFrame ? "invisible" : "visible"}`}
+          className={`absolute size-full object-contain ${currentHourFrame ? "invisible" : "visible"}`}
           preload="auto"
           autoPlay
           playsInline