mirror of
https://github.com/mediacms-io/mediacms.git
synced 2025-12-18 09:32:30 -05:00
feat: Major Upgrade to Video.js v8 — Chapters Functionality, Fixes and Improvements
This commit is contained in:
Yiannis Christodoulou
committed by
GitHub
GitHub
parent
b39072c8ae
commit
a5e6e7b9ca
@@ -0,0 +1,161 @@
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
.playlist-items a {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.video-js,
|
||||
.video-js[tabindex],
|
||||
.vjs-button:focus,
|
||||
.video-js video:focus,
|
||||
.video-js video:focus-visible {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
/* Show time control in all screen sizes */
|
||||
.video-js .vjs-time-control {
|
||||
display: block !important;
|
||||
}
|
||||
.video-js .vjs-time-control.vjs-time-divider {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Hide time tooltip, mouse display, and sprite preview for audio files */
|
||||
.video-js.vjs-audio-type .vjs-time-tooltip,
|
||||
.video-js.vjs-audio-type .vjs-mouse-display,
|
||||
.video-js.vjs-audio-type .vjs-sprite-preview-tooltip,
|
||||
.video-js.vjs-audio-type .chapter-image-sprite {
|
||||
display: none !important;
|
||||
opacity: 0 !important;
|
||||
visibility: hidden !important;
|
||||
}
|
||||
|
||||
/* iOS Native Text Tracks - Position captions above control bar */
|
||||
/* Using ::cue which is the only way to style native tracks on iOS */
|
||||
video::cue {
|
||||
line: -4; /* Move captions up by 4 lines from bottom */
|
||||
}
|
||||
|
||||
/* Mobile-specific caption font size increases */
|
||||
@media (max-width: 767px) {
|
||||
/* iOS native text tracks */
|
||||
video::cue {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/* Video.js text tracks for non-iOS */
|
||||
.video-js .vjs-text-track-display {
|
||||
font-size: 1em !important;
|
||||
}
|
||||
|
||||
.video-js .vjs-text-track-cue {
|
||||
font-size: 1em !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Extra small screens - even larger captions */
|
||||
@media (max-width: 480px) {
|
||||
video::cue {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.video-js .vjs-text-track-display {
|
||||
font-size: 1.2em !important;
|
||||
}
|
||||
|
||||
.video-js .vjs-text-track-cue {
|
||||
font-size: 1.2em !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablet size - moderate increase */
|
||||
@media (min-width: 768px) and (max-width: 1024px) {
|
||||
video::cue {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.video-js .vjs-text-track-display {
|
||||
font-size: 1em !important;
|
||||
}
|
||||
|
||||
.video-js .vjs-text-track-cue {
|
||||
font-size: 1em !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Adjust subtitle position when controls are visible (for non-native Video.js tracks) */
|
||||
/* When controls are VISIBLE (user is active), add extra bottom margin */
|
||||
.video-js:not(.vjs-user-inactive) .vjs-text-track-display {
|
||||
margin-bottom: 2em; /* Adjust this value to move subtitles higher when controls are visible */
|
||||
}
|
||||
|
||||
/* When controls are HIDDEN (user is inactive), use default positioning */
|
||||
.video-js.vjs-user-inactive .vjs-text-track-display {
|
||||
margin-bottom: 0.5em; /* Smaller margin when controls are hidden */
|
||||
}
|
||||
|
||||
/* Center the fullscreen button inside its wrapper */
|
||||
/* @media (hover: hover) and (pointer: fine) {
|
||||
.vjs-fullscreen-control svg {
|
||||
width: 30px !important;
|
||||
height: 30px !important;
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
/* Prevent control bar buttons from overflowing */
|
||||
.video-js .vjs-control-bar {
|
||||
overflow: visible !important;
|
||||
display: flex !important;
|
||||
flex-wrap: nowrap !important;
|
||||
}
|
||||
|
||||
/* Ensure control bar stays within bounds - only allow non-essential buttons to shrink */
|
||||
.video-js .vjs-control-bar .vjs-settings-button,
|
||||
.video-js .vjs-control-bar .vjs-chapters-button,
|
||||
.video-js .vjs-control-bar .vjs-subtitles-button,
|
||||
.video-js .vjs-control-bar .vjs-captions-button,
|
||||
.video-js .vjs-control-bar .vjs-subs-caps-button,
|
||||
.video-js .vjs-control-bar .vjs-autoplay-toggle,
|
||||
.video-js .vjs-control-bar .vjs-next-video-button {
|
||||
flex-shrink: 1 !important;
|
||||
min-width: 0 !important;
|
||||
}
|
||||
|
||||
/* Priority controls that should never shrink - maintain their size and spacing */
|
||||
.video-js .vjs-control-bar .vjs-play-control,
|
||||
.video-js .vjs-control-bar .vjs-volume-panel,
|
||||
.video-js .vjs-control-bar .vjs-fullscreen-control,
|
||||
.video-js .vjs-control-bar .vjs-picture-in-picture-toggle,
|
||||
.video-js .vjs-control-bar .custom-remaining-time {
|
||||
flex-shrink: 0 !important;
|
||||
}
|
||||
|
||||
/* Hide less important buttons on smaller screens */
|
||||
@media (max-width: 768px) {
|
||||
.video-js .vjs-control-bar .vjs-picture-in-picture-toggle {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.video-js .vjs-control-bar .vjs-autoplay-toggle {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.video-js .vjs-control-bar .vjs-next-video-button {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
/* Hide subtitles/captions button on very small screens - already available in settings */
|
||||
.video-js .vjs-control-bar .vjs-subtitles-button,
|
||||
.video-js .vjs-control-bar .vjs-captions-button,
|
||||
.video-js .vjs-control-bar .vjs-subs-caps-button {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user