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

Merge pull request #10 from MertUyanik/codex/duzelt-zen-browser-altyaz-gorunumunu

Browse Source 
Fix Firefox subtitle positioning
This commit is contained in:
Mert Uyanık
2025-10-30 03:39:49 +03:00
committed by GitHub
parent 72520d56e6 17463ea9e7
commit 35e07b059f
1 changed files with 18 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/VideoElement.css
+18 -21
View File
@@ -176,7 +176,8 @@ video::-moz-cue {
/* Container - Chromium */ /* Container - Chromium */
.video-element::-webkit-media-text-track-container { .video-element::-webkit-media-text-track-container {
position: absolute !important; position: absolute !important;
bottom: 40px !important; bottom: var(--player-subtitle-bottom-offset) !important;
bottom: calc(var(--player-subtitle-bottom-offset) + env(safe-area-inset-bottom, 0px)) !important;
left: 0 !important; left: 0 !important;
right: 0 !important; right: 0 !important;
width: 100% !important; width: 100% !important;
@@ -232,7 +233,8 @@ video::-moz-cue {
/* Firefox - Use text track display positioning */ /* Firefox - Use text track display positioning */
video::-moz-text-track-display { video::-moz-text-track-display {
position: absolute !important; position: absolute !important;
bottom: 40px !important; bottom: var(--player-subtitle-bottom-offset) !important;
bottom: calc(var(--player-subtitle-bottom-offset) + env(safe-area-inset-bottom, 0px)) !important;
left: 0 !important; left: 0 !important;
right: 0 !important; right: 0 !important;
width: 100% !important; width: 100% !important;
@@ -252,7 +254,8 @@ video::-moz-text-track-display {
.video-element::-moz-text-track-display { .video-element::-moz-text-track-display {
position: absolute !important; position: absolute !important;
bottom: 40px !important; bottom: var(--player-subtitle-bottom-offset) !important;
bottom: calc(var(--player-subtitle-bottom-offset) + env(safe-area-inset-bottom, 0px)) !important;
left: 0 !important; left: 0 !important;
right: 0 !important; right: 0 !important;
width: 100% !important; width: 100% !important;
@@ -290,14 +293,16 @@ video:fullscreen::-moz-cue,
.video-element:fullscreen::-webkit-media-text-track-container, .video-element:fullscreen::-webkit-media-text-track-container,
:fullscreen .video-element::-webkit-media-text-track-container { :fullscreen .video-element::-webkit-media-text-track-container {
bottom: 120px !important; bottom: calc(var(--player-subtitle-bottom-offset) + 40px) !important;
bottom: calc(var(--player-subtitle-bottom-offset) + 40px + env(safe-area-inset-bottom, 0px)) !important;
} }
video:fullscreen::-moz-text-track-display, video:fullscreen::-moz-text-track-display,
.video-element:fullscreen::-moz-text-track-display, .video-element:fullscreen::-moz-text-track-display,
:fullscreen video::-moz-text-track-display, :fullscreen video::-moz-text-track-display,
:fullscreen .video-element::-moz-text-track-display { :fullscreen .video-element::-moz-text-track-display {
bottom: 120px !important; bottom: calc(var(--player-subtitle-bottom-offset) + 40px) !important;
bottom: calc(var(--player-subtitle-bottom-offset) + 40px + env(safe-area-inset-bottom, 0px)) !important;
} }
/* ==================== RESPONSIVE ==================== */ /* ==================== RESPONSIVE ==================== */
@@ -311,13 +316,8 @@ video:fullscreen::-moz-text-track-display,
font-size: 1.35rem !important; font-size: 1.35rem !important;
} }
.video-element::-webkit-media-text-track-container { .video-player {
bottom: 80px !important; --player-subtitle-bottom-offset: clamp(80px, 14vh, 120px);
}
video::-moz-text-track-display,
.video-element::-moz-text-track-display {
bottom: 80px !important;
} }
} }
@@ -331,8 +331,11 @@ video:fullscreen::-moz-text-track-display,
padding: 0.35em 0.7em !important; padding: 0.35em 0.7em !important;
} }
.video-player {
--player-subtitle-bottom-offset: 80px;
}
.video-element::-webkit-media-text-track-container { .video-element::-webkit-media-text-track-container {
bottom: 80px !important;
padding: 0 12px !important; padding: 0 12px !important;
} }
@@ -342,7 +345,6 @@ video:fullscreen::-moz-text-track-display,
video::-moz-text-track-display, video::-moz-text-track-display,
.video-element::-moz-text-track-display { .video-element::-moz-text-track-display {
bottom: 80px !important;
padding: 0 12px !important; padding: 0 12px !important;
} }
} }
@@ -356,12 +358,7 @@ video:fullscreen::-moz-text-track-display,
font-size: 1rem !important; font-size: 1rem !important;
} }
.video-element::-webkit-media-text-track-container { .video-player {
bottom: 60px !important; --player-subtitle-bottom-offset: 60px;
}
video::-moz-text-track-display,
.video-element::-moz-text-track-display {
bottom: 60px !important;
} }
} }