peter/siftlode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(watch): shrink-wrap the player to the video aspect

Browse source 
A vertical/short clip rendered in a fixed full-width box with large black side
bars. The player container now uses w-fit + mx-auto and the video max-h/max-w, so
a portrait clip becomes a narrow centered player and a landscape clip fills the
width — no letterboxing either way.
This commit is contained in:
npeter83 2026-07-04 21:25:37 +02:00
parent 42d465d760
commit 2beec6bb18
1 changed files with 9 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

11
frontend/src/components/WatchPage.tsx
View file

@ -152,8 +152,15 @@ export default function WatchPage() {
{status === "ready" && meta && (
<div>
<div className="rounded-xl overflow-hidden bg-black border border-slate-800">
<video controls playsInline src={meta.file_url} className="w-full max-h-[75vh] mx-auto block" />
{/* Shrink-wrap the player to the video so a vertical/short clip renders as a narrow
player instead of a wide box with black bars; a landscape clip fills the width. */}
<div className="rounded-xl overflow-hidden bg-black border border-slate-800 w-fit max-w-full mx-auto">
<video
controls
playsInline
src={meta.file_url}
className="max-h-[80vh] max-w-full mx-auto block"
/>
</div>
<div className="mt-3 flex items-start gap-3">
<div className="min-w-0 flex-1">