From 5da377a8a5dc022ee91fee2e04f6fac6f0ddefca Mon Sep 17 00:00:00 2001 From: Yiannis Christodoulou Date: Fri, 10 Oct 2025 09:36:23 +0300 Subject: [PATCH] Make control bar spacer fully transparent Updated the spacer element in the video player's control bar to be fully transparent and non-interactive by setting background, border, outline, boxShadow, opacity, and pointerEvents styles. This ensures the spacer does not affect the visual appearance or user interaction. --- .../src/components/video-player/VideoJSPlayer.jsx | 9 +++++++++ 1 file changed, 9 insertions(+) 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 623283d8..8fefd5c7 100644 --- a/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx +++ b/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx @@ -2843,6 +2843,15 @@ function VideoJSPlayer({ videoId = 'default-video' }) { spacer.style.flex = '1'; spacer.style.minWidth = '1px'; + // Remove background and style the spacer to be transparent + spacer.style.background = 'transparent'; + spacer.style.backgroundColor = 'transparent'; + spacer.style.border = 'none'; + spacer.style.outline = 'none'; + spacer.style.boxShadow = 'none'; + spacer.style.opacity = '0'; + spacer.style.pointerEvents = 'none'; + // Insert spacer right after the time display const controlBarEl = controlBar.el(); const timeDisplayEl = customRemainingTime.el();