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.
This commit is contained in:
Alex Gleason
2026-02-23 23:08:32 -06:00
parent fa7c141382
commit eabaaa3fd5
+10 -1
View File
@@ -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<HTMLVideoElement>)}