diff --git a/frontend-tools/video-js/src/VideoJS.css b/frontend-tools/video-js/src/VideoJS.css index 09fadf7f..b92df26b 100644 --- a/frontend-tools/video-js/src/VideoJS.css +++ b/frontend-tools/video-js/src/VideoJS.css @@ -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; } diff --git a/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx b/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx index 1d74a16f..73839bfb 100644 --- a/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx +++ b/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx @@ -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