code100x
feature: Add Theater Mode to Video Player for Enhanced Viewing Experience
Is your feature request related to a problem? Please describe.
Currently, the video player is fixed within the page layout, which can feel cramped and distracting during learning sessions. Users often want a more immersive viewing experience, similar to YouTube or Udemy's theater mode, without switching to full-screen.
Describe the solution you'd like
Introduce a "Theater Mode" button on the video player that expands the player to a wide layout (e.g., full width with dark background) while keeping navigation and comments accessible. This improves focus and UX for learners.
Describe alternatives you've considered
- Using full-screen mode (not ideal for multitasking).
- Embedding the video in a modal (affects layout and UX).
- Custom resizing with user scripts (non-native solution).
Additional context The project currently uses video.js for video playback. To implement Theater Mode, we plan to:
Wrap the video player inside a container div.
Add a toggle button ("Theater Mode" / "Exit Theater") near the player UI.
On toggle:
Expand the container to a wider layout or fixed position (e.g., position: fixed; top: 0; width: 100vw; height: 90vh) for immersive viewing.
Dim or blur the background using a CSS overlay to reduce distractions.
Preserve access to controls, subtitles, and progress.
This solution works with video.js out-of-the-box, without breaking its player logic, and enhances the user experience for focused learning or watching sessions.
