From eabaaa3fd5cd1ff98f51eacca726b270fcf1e55b Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Mon, 23 Feb 2026 23:08:32 -0600 Subject: [PATCH] Fix VideoPlayer letterboxing when dim is known When the container has an aspect-ratio from the dim tag, switch the video to absolute inset-0 h-full to fill it cleanly. Fall back to max-h-[70vh] object-cover for videos without dim data. --- src/components/VideoPlayer.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/components/VideoPlayer.tsx b/src/components/VideoPlayer.tsx index 8bebb8c5..d003d690 100644 --- a/src/components/VideoPlayer.tsx +++ b/src/components/VideoPlayer.tsx @@ -174,7 +174,16 @@ export function VideoPlayer({ src: originalSrc, poster, className, dim, blurhash ref={videoRef} src={src} poster={poster} - className="w-full max-h-[70vh] object-cover cursor-pointer" + className={cn( + 'w-full cursor-pointer', + // When dim is known the container already has the correct aspect ratio, + // so the video just needs to fill it (absolute inset-0). Without dim we + // fall back to the original constrained height with object-cover so the + // player doesn't grow to an unmanageable size. + aspectRatio + ? 'absolute inset-0 h-full object-cover' + : 'max-h-[70vh] object-cover', + )} playsInline preload="metadata" {...({ 'webkit-playsinline': 'true' } as React.HTMLAttributes)}