From 90d9c444c8cb714b1d437b198c68e301ddf95da4 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 20 Mar 2026 09:47:54 +0000
Subject: [PATCH] fix: prevent video stretching in timeline scrubbing preview

- MsePlayer: change default object-fit fallback from fill to contain
  (grid layout keeps fill via --frigate-mse-object-fit:fill CSS variable)
- PreviewPlayer: add object-contain class to video element
- HlsVideoPlayer: add object-contain class to video element

Recordings view and timeline preview now preserve aspect ratio,
while live grid continues to stretch corridor cameras as before.
---
 web/src/components/player/HlsVideoPlayer.tsx | 2 +-
 web/src/components/player/MsePlayer.tsx      | 2 +-
 web/src/components/player/PreviewPlayer.tsx  | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/src/components/player/HlsVideoPlayer.tsx b/web/src/components/player/HlsVideoPlayer.tsx
index b91efd84b..2e8e900a7 100644
--- a/web/src/components/player/HlsVideoPlayer.tsx
+++ b/web/src/components/player/HlsVideoPlayer.tsx
@@ -390,7 +390,7 @@ export default function HlsVideoPlayer({
             )}
           <video
             ref={videoRef}
-            className={`size-full rounded-lg bg-black md:rounded-2xl ${loadedMetadata ? "" : "invisible"} cursor-pointer`}
+            className={`size-full object-contain rounded-lg bg-black md:rounded-2xl ${loadedMetadata ? "" : "invisible"} cursor-pointer`}
             preload="auto"
             autoPlay
             controls={!frigateControls}
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:
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