CopyBot/mediacms
1
0
Fork 0
mirror of https://github.com/mediacms-io/mediacms.git synced 2025-11-05 23:18:53 -05:00
Code Issues Packages Projects Releases Wiki Activity

Improve VideoJS control bar layout and responsiveness

Browse Source 
Added CSS rules to prevent control bar button overflow, prioritize essential controls, and hide less important buttons on smaller screens. Also removed legacy VideoJS static assets no longer in use.
This commit is contained in:
Yiannis Christodoulou 2025-10-17 15:52:23 +03:00
parent 6f3ed46413
commit a4f0c742a0
1 changed files with 56 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
frontend-tools/video-js/src/components/video-player/VideoJSPlayer.css
View File

@ -50,3 +50,59 @@ button {
} }
} }
*/ */
/* 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;
}
}