diff --git a/client/src/components/VideoPlayer.tsx b/client/src/components/VideoPlayer.tsx
index e8e2e27..65a3ad4 100644
--- a/client/src/components/VideoPlayer.tsx
+++ b/client/src/components/VideoPlayer.tsx
@@ -1,11 +1,13 @@
 interface Props {
   src: string;
+  variant?: 'compact' | 'wide';
 }
 
-export default function VideoPlayer({ src }: Props) {
+export default function VideoPlayer({ src, variant = 'wide' }: Props) {
   if (!src) return null;
+  const className = variant === 'compact' ? 'video-shell compact' : 'video-shell';
   return (
-    <div className="video-shell">
+    <div className={className}>
       <video controls src={src} preload="metadata" />
     </div>
   );