Added some functionality so we can modify the size of the playing video

templates/lesson_view.html

@@ -130,11 +130,25 @@
         }
         video, audio { 
             width: 100%; 
-            max-width: 800px; 
+            max-width: 100%; 
             border-radius: var(--radius);
             display: block;
             margin: 0 auto;
         }
+        video {
+            resize: both;
+            overflow: hidden;
+            object-fit: contain;
+            background: #000;
+            min-width: 320px;
+            min-height: 200px;
+        }
+        .resize-hint {
+            text-align: center;
+            font-size: 0.8em;
+            color: var(--text-muted);
+            margin-top: 6px;
+        }
         .content { 
             margin: 20px 0; 
         }
@@ -246,6 +260,7 @@
                 {% endif %}
                 Your browser does not support the video tag.
             </video>
+            <p class="resize-hint">↘ Drag the bottom-right corner to resize the player</p>
             {% endif %}
 
             {% if lesson.audio_file %}
@@ -372,6 +387,44 @@
             const activeMedia = video || audio;
             let isCompleted = false;
 
+            // Restore last-used video player size, and persist future resizes
+            // (dragging the native corner handle) so it sticks next time.
+            if (video) {
+                let applyingStoredSize = true;
+                let resizeSaveTimeout = null;
+
+                fetch('/api/settings')
+                    .then(r => r.json())
+                    .then(data => {
+                        const s = data.settings || {};
+                        if (s.video_width && s.video_height) {
+                            video.style.width = s.video_width + 'px';
+                            video.style.height = s.video_height + 'px';
+                        }
+                        setTimeout(() => { applyingStoredSize = false; }, 300);
+                    })
+                    .catch(() => { applyingStoredSize = false; });
+
+                if (window.ResizeObserver) {
+                    const observer = new ResizeObserver(() => {
+                        if (applyingStoredSize) return;
+                        clearTimeout(resizeSaveTimeout);
+                        resizeSaveTimeout = setTimeout(() => {
+                            const rect = video.getBoundingClientRect();
+                            fetch('/api/settings', {
+                                method: 'POST',
+                                headers: { 'Content-Type': 'application/json' },
+                                body: JSON.stringify({
+                                    video_width: Math.round(rect.width),
+                                    video_height: Math.round(rect.height)
+                                })
+                            }).catch(() => {});
+                        }, 500);
+                    });
+                    observer.observe(video);
+                }
+            }
+
             if (activeMedia) {
                 let lastSaveTime = 0;
 

templates/settings.html

@@ -331,6 +331,22 @@
             </div>
         </div>
 
+        <div class="card">
+            <h2>Video Player</h2>
+            <div class="setting-row">
+                <label>Player size
+                    <span class="setting-desc">
+                        {% if settings.video_width and settings.video_height %}
+                        Remembered at {{ settings.video_width }}×{{ settings.video_height }}px from your last resize
+                        {% else %}
+                        Using default responsive full-width sizing
+                        {% endif %}
+                    </span>
+                </label>
+                <button class="btn btn-secondary" onclick="resetVideoSize()">Reset size</button>
+            </div>
+        </div>
+
         <div class="actions">
             <button class="btn btn-secondary" onclick="resetSettings()">Reset to Defaults</button>
             <span id="save-status">✓ Saved</span>
@@ -425,6 +441,19 @@
             });
         }
 
+        function resetVideoSize() {
+            fetch('/api/settings', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ video_width: '', video_height: '' })
+            })
+            .then(r => r.json())
+            .then(data => {
+                if (data.success) location.reload();
+            })
+            .catch(err => console.error('Failed to reset video size:', err));
+        }
+
         function resetSettings() {
             fetch('/api/settings/reset', { method: 'POST' })
                 .then(r => r.json())