aljaz/boris
1
1
Fork 0
mirror of https://github.com/dergigi/boris.git synced 2026-01-07 08:54:25 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: implement responsive video player with aspect ratio

Browse Source 
- Update ReactPlayer to use width='100%', height='auto' with aspectRatio: '16/9'
- Replace padding-top approach with modern aspect-ratio CSS property
- Add minimum width (300px) and maximum width (800px) constraints
- Center video container with margin: 0 auto
- Ensure video player is no longer constrained by title length
- Improve video viewing experience across different screen sizes
This commit is contained in:
Gigi
2025-10-13 20:19:08 +02:00
parent 919bb8151f
commit f9fa2f05f0
2 changed files with 12 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/styles/components/reader.css
View File

@@ -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; }