Add custom wrapper for fullscreen button in VideoJS

frontend-tools/video-js/src/VideoJS.css

@@ -287,9 +287,39 @@ html {
     position: relative !important;
 }
 
-.video-js .vjs-control {
+/* Fullscreen button wrapper styling */
-    height: auto !important;
+.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

@@ -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