diff --git a/src/components/ContentPanel.tsx b/src/components/ContentPanel.tsx
index 4d47cab5..581a46dc 100644
--- a/src/components/ContentPanel.tsx
+++ b/src/components/ContentPanel.tsx
@@ -400,9 +400,13 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
             <ReactPlayer 
               url={selectedUrl as string} 
               controls 
-              width="100%" 
-              height="100%"
-              style={{ position: 'absolute', top: 0, left: 0 }}
+              width="100%"
+              height="auto"
+              style={{ 
+                width: '100%', 
+                height: 'auto', 
+                aspectRatio: '16/9' 
+              }}
               onDuration={(d) => setVideoDurationSec(Math.floor(d))}
             />
           </div>
diff --git a/src/styles/components/reader.css b/src/styles/components/reader.css
index 1a3ddc2d..92677e5f 100644
--- a/src/styles/components/reader.css
+++ b/src/styles/components/reader.css
@@ -13,8 +13,11 @@
 /* Video container - responsive wrapper following react-player docs */
 .reader-video { 
   position: relative;
-  padding-top: 56.25%; /* 16:9 aspect ratio */
-  margin-bottom: 1rem;
+  width: 100%;
+  min-width: 300px;  /* Minimum width */
+  max-width: 800px;   /* Maximum width */
+  aspect-ratio: 16/9;
+  margin: 0 auto 1rem auto; /* Center it */
   background: #000;
 }
 .reader.empty { color: #888; }