Mert Uyanık
365 lines
9.3 KiB
CSS
365 lines
9.3 KiB
CSS
/* ============================================
|
|
VIDEO CONTAINER
|
|
============================================ */
|
|
|
|
.video-container {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: var(--player-z-video);
|
|
overflow: visible;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* ============================================
|
|
VIDEO ELEMENT
|
|
============================================ */
|
|
|
|
.video-element {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
object-fit: contain;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
/* ============================================
|
|
HIDE NATIVE MEDIA CONTROLS
|
|
============================================ */
|
|
|
|
/* Chrome/Safari/Edge */
|
|
.video-element::-webkit-media-controls {
|
|
display: none !important;
|
|
}
|
|
|
|
.video-element::-webkit-media-controls-enclosure {
|
|
display: none !important;
|
|
}
|
|
|
|
.video-element::-webkit-media-controls-panel {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Firefox */
|
|
.video-element::-moz-media-controls {
|
|
display: none !important;
|
|
}
|
|
|
|
/* ============================================
|
|
SUBTITLE STYLING - Modern & Cross-Browser
|
|
Optimized for Chromium and Firefox
|
|
============================================ */
|
|
|
|
/* ==================== BASE CUE STYLES ==================== */
|
|
|
|
/* All browsers - Base subtitle appearance */
|
|
::cue {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif !important;
|
|
font-size: 1.5rem !important;
|
|
font-weight: 700 !important;
|
|
line-height: 1.5 !important;
|
|
color: #ffffff !important;
|
|
background-color: rgba(0, 0, 0, 0.9) !important;
|
|
padding: 0.4em 0.8em !important;
|
|
border-radius: 6px !important;
|
|
text-shadow:
|
|
0 1px 2px rgba(0, 0, 0, 1),
|
|
0 2px 8px rgba(0, 0, 0, 0.8) !important;
|
|
white-space: pre-line !important;
|
|
}
|
|
|
|
/* Chromium specific */
|
|
.video-element::cue {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif !important;
|
|
font-size: 1.5rem !important;
|
|
font-weight: 700 !important;
|
|
line-height: 1.5 !important;
|
|
color: #ffffff !important;
|
|
background-color: rgba(0, 0, 0, 0.9) !important;
|
|
padding: 0.4em 0.8em !important;
|
|
border-radius: 6px !important;
|
|
text-shadow:
|
|
0 1px 2px rgba(0, 0, 0, 1),
|
|
0 2px 8px rgba(0, 0, 0, 0.8) !important;
|
|
white-space: pre-line !important;
|
|
}
|
|
|
|
/* Firefox specific - Base styles */
|
|
::-moz-cue {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif !important;
|
|
font-size: 1.5rem !important;
|
|
font-weight: 700 !important;
|
|
line-height: 1.5 !important;
|
|
color: #ffffff !important;
|
|
background-color: rgba(0, 0, 0, 0.9) !important;
|
|
padding: 0.4em 0.8em !important;
|
|
border-radius: 6px !important;
|
|
text-shadow:
|
|
0 1px 2px rgba(0, 0, 0, 1),
|
|
0 2px 8px rgba(0, 0, 0, 0.8) !important;
|
|
white-space: pre-line !important;
|
|
}
|
|
|
|
video::-moz-cue {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif !important;
|
|
font-size: 1.5rem !important;
|
|
font-weight: 700 !important;
|
|
line-height: 1.5 !important;
|
|
color: #ffffff !important;
|
|
background-color: rgba(0, 0, 0, 0.9) !important;
|
|
padding: 0.4em 0.8em !important;
|
|
border-radius: 6px !important;
|
|
text-shadow:
|
|
0 1px 2px rgba(0, 0, 0, 1),
|
|
0 2px 8px rgba(0, 0, 0, 0.8) !important;
|
|
white-space: pre-line !important;
|
|
}
|
|
|
|
.video-element::-moz-cue {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif !important;
|
|
font-size: 1.5rem !important;
|
|
font-weight: 700 !important;
|
|
line-height: 1.5 !important;
|
|
color: #ffffff !important;
|
|
background-color: rgba(0, 0, 0, 0.9) !important;
|
|
padding: 0.4em 0.8em !important;
|
|
border-radius: 6px !important;
|
|
text-shadow:
|
|
0 1px 2px rgba(0, 0, 0, 1),
|
|
0 2px 8px rgba(0, 0, 0, 0.8) !important;
|
|
white-space: pre-line !important;
|
|
}
|
|
|
|
/* ==================== TEXT FORMATTING ==================== */
|
|
|
|
::cue(b), ::cue(strong) {
|
|
font-weight: 900 !important;
|
|
}
|
|
|
|
::cue(i), ::cue(em) {
|
|
font-style: italic !important;
|
|
}
|
|
|
|
::cue(u) {
|
|
text-decoration: underline !important;
|
|
}
|
|
|
|
.video-element::cue(b),
|
|
.video-element::cue(strong) {
|
|
font-weight: 900 !important;
|
|
}
|
|
|
|
.video-element::cue(i),
|
|
.video-element::cue(em) {
|
|
font-style: italic !important;
|
|
}
|
|
|
|
.video-element::cue(u) {
|
|
text-decoration: underline !important;
|
|
}
|
|
|
|
/* Firefox text formatting */
|
|
::-moz-cue(b), ::-moz-cue(strong) {
|
|
font-weight: 900 !important;
|
|
}
|
|
|
|
::-moz-cue(i), ::-moz-cue(em) {
|
|
font-style: italic !important;
|
|
}
|
|
|
|
::-moz-cue(u) {
|
|
text-decoration: underline !important;
|
|
}
|
|
|
|
/* ==================== CHROMIUM POSITIONING ==================== */
|
|
|
|
/* Container - Chromium */
|
|
.video-element::-webkit-media-text-track-container {
|
|
position: absolute !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;
|
|
right: 0 !important;
|
|
width: 100% !important;
|
|
height: auto !important;
|
|
|
|
display: flex !important;
|
|
flex-direction: column !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
|
|
overflow: visible !important;
|
|
z-index: 10 !important;
|
|
pointer-events: none !important;
|
|
}
|
|
|
|
/* Display wrapper - Chromium */
|
|
.video-element::-webkit-media-text-track-display {
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
|
|
display: flex !important;
|
|
flex-direction: column !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
|
|
margin: 0 !important;
|
|
padding: 0 20px !important;
|
|
|
|
text-align: center !important;
|
|
}
|
|
|
|
/* ==================== FIREFOX POSITIONING ==================== */
|
|
|
|
/* Firefox - Position subtitles using video wrapper approach */
|
|
@-moz-document url-prefix() {
|
|
.video-container {
|
|
position: relative;
|
|
}
|
|
|
|
.video-element {
|
|
position: relative;
|
|
}
|
|
|
|
/* Firefox subtitle container positioning */
|
|
.video-element::cue {
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
/* Firefox - Use text track display positioning */
|
|
video::-moz-text-track-display {
|
|
position: absolute !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;
|
|
right: 0 !important;
|
|
width: 100% !important;
|
|
|
|
display: flex !important;
|
|
flex-direction: column !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
|
|
padding: 0 20px !important;
|
|
margin: 0 !important;
|
|
|
|
text-align: center !important;
|
|
z-index: 10 !important;
|
|
pointer-events: none !important;
|
|
}
|
|
|
|
.video-element::-moz-text-track-display {
|
|
position: absolute !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;
|
|
right: 0 !important;
|
|
width: 100% !important;
|
|
|
|
display: flex !important;
|
|
flex-direction: column !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
|
|
padding: 0 20px !important;
|
|
margin: 0 !important;
|
|
|
|
text-align: center !important;
|
|
z-index: 10 !important;
|
|
pointer-events: none !important;
|
|
}
|
|
|
|
/* ==================== FULLSCREEN ==================== */
|
|
|
|
.video-element:fullscreen::cue,
|
|
:fullscreen .video-element::cue {
|
|
font-size: 2rem !important;
|
|
padding: 0.5em 1em !important;
|
|
}
|
|
|
|
::-moz-cue:fullscreen,
|
|
video:fullscreen::-moz-cue,
|
|
.video-element:fullscreen::-moz-cue,
|
|
:fullscreen ::-moz-cue,
|
|
:fullscreen video::-moz-cue,
|
|
:fullscreen .video-element::-moz-cue {
|
|
font-size: 2rem !important;
|
|
padding: 0.5em 1em !important;
|
|
}
|
|
|
|
.video-element:fullscreen::-webkit-media-text-track-container,
|
|
:fullscreen .video-element::-webkit-media-text-track-container {
|
|
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-element:fullscreen::-moz-text-track-display,
|
|
:fullscreen video::-moz-text-track-display,
|
|
:fullscreen .video-element::-moz-text-track-display {
|
|
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 ==================== */
|
|
|
|
@media (max-width: 1024px) {
|
|
::cue,
|
|
.video-element::cue,
|
|
::-moz-cue,
|
|
video::-moz-cue,
|
|
.video-element::-moz-cue {
|
|
font-size: 1.35rem !important;
|
|
}
|
|
|
|
.video-player {
|
|
--player-subtitle-bottom-offset: clamp(80px, 14vh, 120px);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
::cue,
|
|
.video-element::cue,
|
|
::-moz-cue,
|
|
video::-moz-cue,
|
|
.video-element::-moz-cue {
|
|
font-size: 1.15rem !important;
|
|
padding: 0.35em 0.7em !important;
|
|
}
|
|
|
|
.video-player {
|
|
--player-subtitle-bottom-offset: 80px;
|
|
}
|
|
|
|
.video-element::-webkit-media-text-track-container {
|
|
padding: 0 12px !important;
|
|
}
|
|
|
|
.video-element::-webkit-media-text-track-display {
|
|
max-width: 92% !important;
|
|
}
|
|
|
|
video::-moz-text-track-display,
|
|
.video-element::-moz-text-track-display {
|
|
padding: 0 12px !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 375px) {
|
|
::cue,
|
|
.video-element::cue,
|
|
::-moz-cue,
|
|
video::-moz-cue,
|
|
.video-element::-moz-cue {
|
|
font-size: 1rem !important;
|
|
}
|
|
|
|
.video-player {
|
|
--player-subtitle-bottom-offset: 60px;
|
|
}
|
|
}
|