CDN/mediacms
3
0
Fork 0
mirror of https://github.com/mediacms-io/mediacms.git synced 2025-10-06 22:32:41 +07:00
Code Issues Packages Projects Releases Wiki Activity

Add custom wrapper for fullscreen button in VideoJS

Browse Source
This commit is contained in:
Yiannis Christodoulou
2025-10-02 12:25:31 +03:00
parent 09bd4d59b1
commit a43316bd5b
2 changed files with 50 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend-tools/video-js/src/VideoJS.css
+32 -2
View File
@@ -287,9 +287,39 @@ html {
position: relative !important;
}
.video-js .vjs-control {
height: auto !important;
/* Fullscreen button wrapper styling */
.video-js .vjs-fullscreen-wrapper {
order: 10 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: relative !important;
background: rgba(0, 0, 0, 0.1) !important;
border-radius: 6px !important;
padding: 2px !important;
margin: 0 2px !important;
transition: background-color 0.3s ease !important;
width: 40px !important;
height: 40px !important;
flex-shrink: 0 !important;
}
.video-js .vjs-fullscreen-wrapper:hover {
background: rgba(0, 0, 0, 0.2) !important;
}
/* Center the fullscreen button inside its wrapper */
.video-js .vjs-fullscreen-wrapper .vjs-fullscreen-control {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 36px !important;
height: 36px !important;
margin: 0 !important;
padding: 0 !important;
position: relative !important;
}
.video-js .vjs-next-video-control {
order: 1 !important;
}
frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx
+18
View File
@@ -2755,6 +2755,24 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
}
}, 100); // Small delay to ensure pip button is available
// Wrap fullscreen button in custom div container
setTimeout(() => {
const controlBar = playerRef.current.getChild('controlBar');
const fullscreenControl = controlBar?.getChild('fullscreenToggle');
if (fullscreenControl) {
const fullscreenButtonEl = fullscreenControl.el();
if (fullscreenButtonEl) {
const fullscreenWrapper = document.createElement('div');
fullscreenWrapper.className =
'vjs-fullscreen-wrapper vjs-menu-button vjs-menu-button-popup vjs-control vjs-button';
// Insert wrapper before the fullscreen button and move button inside
fullscreenButtonEl.parentNode.insertBefore(fullscreenWrapper, fullscreenButtonEl);
fullscreenWrapper.appendChild(fullscreenButtonEl);
}
}
}, 100); // Small delay to ensure fullscreen button is available
// END: Add Settings Menu Component
// BEGIN: Add Seek Indicator Component