hibna/player
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor video player CSS for improved subtitles and layout

Browse Source 
Major CSS refactor for video player components: improves subtitle styling and cross-browser positioning, restructures ControlsLayer and VideoElement styles for clarity and responsiveness, and updates custom properties for better subtitle/controls separation. Adds a local settings file for permissions.
This commit is contained in:
hibna
2025-10-30 03:31:07 +03:00
parent f48ef02bbd
commit 72520d56e6
5 changed files with 503 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/VideoPlayer.css
+48 -18
View File
@@ -1,3 +1,7 @@
/* ============================================
VIDEO PLAYER - Main Container
============================================ */
.video-player {
position: relative;
width: 100%;
@@ -12,12 +16,40 @@
-webkit-user-select: none;
}
.video-player *,
.video-player *::before,
.video-player *::after {
/* Apply box-sizing to all child elements */
.video-player * {
box-sizing: border-box;
}
/* Reset video element box-sizing to preserve native subtitle rendering */
.video-player video {
box-sizing: content-box;
}
/* ============================================
ASPECT RATIO - 16:9 Intrinsic Ratio
============================================ */
/* Use padding-top hack for aspect ratio */
.video-player::before {
content: '';
display: block;
padding-top: 56.25%; /* 16:9 aspect ratio */
}
/* Position all direct children absolutely within aspect ratio container */
.video-player > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* ============================================
FULLSCREEN SUPPORT
============================================ */
.video-player:fullscreen {
width: 100vw;
height: 100vh;
@@ -38,22 +70,10 @@
height: 100vh;
}
/* Aspect ratio container */
.video-player::before {
content: '';
display: block;
padding-top: 56.25%; /* 16:9 aspect ratio */
}
/* ============================================
NATIVE CONTROLS - Hide completely
============================================ */
.video-player > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Remove default video controls */
.video-player video::-webkit-media-controls {
display: none !important;
}
@@ -61,3 +81,13 @@
.video-player video::-webkit-media-controls-enclosure {
display: none !important;
}
.video-player video::-webkit-media-controls-panel {
display: none !important;
}
/* Ensure subtitle text tracks are visible */
.video-player video::-webkit-media-text-track-container,
.video-player video::-webkit-media-text-track-display {
display: block !important;
}