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 ffc80278..ace64416 100644 --- a/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx +++ b/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx @@ -2619,8 +2619,18 @@ function VideoJSPlayer({ videoId = 'default-video' }) { playerRef.current.on('useractive', syncProgressVisibility); playerRef.current.on('userinactive', syncProgressVisibility); - // Initial sync - syncProgressVisibility(); + // Initial sync - hide until video starts + progressEl.style.opacity = '0'; + progressEl.style.visibility = 'hidden'; + + // Show when video starts + const showOnPlay = () => { + syncProgressVisibility(); + playerRef.current.off('play', showOnPlay); + playerRef.current.off('seeking', showOnPlay); + }; + playerRef.current.on('play', showOnPlay); + playerRef.current.on('seeking', showOnPlay); // Store cleanup function customComponents.current.cleanupProgressVisibility = () => { diff --git a/frontend-tools/video-js/src/styles/embed.css b/frontend-tools/video-js/src/styles/embed.css index b202c3b5..30a70118 100644 --- a/frontend-tools/video-js/src/styles/embed.css +++ b/frontend-tools/video-js/src/styles/embed.css @@ -76,9 +76,10 @@ /* ===== EMBED CONTROL BAR POSITIONING ===== */ /* Sticky controls for embed player - always at bottom of window */ -#page-embed .video-js-root-embed .video-js .vjs-control-bar { +/* #page-embed .video-js-root-embed .video-js .vjs-control-bar { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; } + */