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

fix: Sticky controls for embed player - always at bottom of window

Browse Source
This commit is contained in:
Yiannis Christodoulou 2025-09-22 23:32:58 +03:00
parent 467f2cf1c6
commit 9670ab7e11
1 changed files with 91 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
frontend-tools/video-js/src/VideoJS.css
View File

@ -860,11 +860,97 @@ button {
#page-embed .video-js-root-embed { #page-embed .video-js-root-embed {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; }
width: 100vw;
height: 100vh; /* Sticky controls for embed player - always at bottom of window */
z-index: 9999; #page-embed .video-js-root-embed .video-js .vjs-control-bar {
background: #000; position: fixed !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100vw !important;
z-index: 1001 !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
padding: 0 12px !important;
margin: 0 !important;
border: none !important;
box-shadow: none !important;
}
/* Ensure progress bar is also sticky for embed player */
#page-embed .video-js-root-embed .video-js .vjs-progress-control {
position: fixed !important;
bottom: 48px !important;
left: 0 !important;
right: 0 !important;
width: 100vw !important;
z-index: 1000 !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
}
/* Ensure gradient overlay extends to full window width for embed */
#page-embed .video-js-root-embed .video-js::after {
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100vw !important;
height: 120px !important;
z-index: 999 !important;
}
/* Mobile optimizations for embed player sticky controls */
@media (max-width: 768px) {
#page-embed .video-js-root-embed .video-js .vjs-control-bar {
height: 56px !important; /* Larger touch target on mobile */
padding: 0 16px !important; /* More padding for touch */
margin: 0 !important;
border: none !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
}
#page-embed .video-js-root-embed .video-js .vjs-progress-control {
bottom: 56px !important; /* Adjust for larger control bar */
margin: 0 !important;
padding: 0 !important;
}
/* Ensure controls don't interfere with mobile browser chrome */
#page-embed .video-js-root-embed .video-js .vjs-control-bar {
padding-bottom: env(safe-area-inset-bottom, 0) !important;
}
}
/* Ensure controls are always visible when user is active (embed only) */
#page-embed .video-js-root-embed .video-js.vjs-user-active .vjs-control-bar,
#page-embed .video-js-root-embed .video-js.vjs-paused .vjs-control-bar,
#page-embed .video-js-root-embed .video-js.vjs-ended .vjs-control-bar {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0) !important;
}
/* Smooth transitions for control visibility */
#page-embed .video-js-root-embed .video-js .vjs-control-bar {
transition:
opacity 0.3s ease,
transform 0.3s ease !important;
}
/* Hide controls when user is inactive (but keep them sticky) */
#page-embed .video-js-root-embed .video-js.vjs-user-inactive:not(.vjs-paused):not(.vjs-ended) .vjs-control-bar {
opacity: 0 !important;
transform: translateY(100%) !important;
}
#page-embed .video-js-root-embed .video-js.vjs-user-inactive:not(.vjs-paused):not(.vjs-ended) .vjs-progress-control {
opacity: 0 !important;
} }
.video-chapter { .video-chapter {