diff --git a/frontend/src/components/WatchPage.tsx b/frontend/src/components/WatchPage.tsx
index ecec257..0738247 100644
--- a/frontend/src/components/WatchPage.tsx
+++ b/frontend/src/components/WatchPage.tsx
@@ -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">