diff --git a/frontend-tools/video-js/src/components/controls/SeekIndicator.js b/frontend-tools/video-js/src/components/controls/SeekIndicator.js index fc1321ad..f9b4f18f 100644 --- a/frontend-tools/video-js/src/components/controls/SeekIndicator.js +++ b/frontend-tools/video-js/src/components/controls/SeekIndicator.js @@ -8,6 +8,7 @@ class SeekIndicator extends Component { constructor(player, options) { super(player, options); this.seekAmount = options.seekAmount || 5; // Default seek amount in seconds + this.isEmbedPlayer = options.isEmbedPlayer || false; // Store embed mode flag this.showTimeout = null; } @@ -173,22 +174,24 @@ class SeekIndicator extends Component { // Clear any text content in the text element textEl.textContent = ''; - // Force show the element with YouTube-style positioning + // Use fixed positioning relative to viewport el.style.cssText = ` - position: absolute !important; - top: 50% !important; - left: 50% !important; - transform: translate(-50%, -50%) !important; - z-index: 99999 !important; - display: flex !important; - align-items: center !important; - justify-content: center !important; - visibility: visible !important; - opacity: 1 !important; - pointer-events: none !important; - width: auto !important; - height: auto !important; - `; + position: fixed !important; + top: 50vh !important; + left: 50vw !important; + transform: translate(-50%, -50%) !important; + z-index: 10000 !important; + display: flex !important; + align-items: center !important; + justify-content: center !important; + visibility: visible !important; + opacity: 1 !important; + pointer-events: none !important; + width: auto !important; + height: auto !important; + margin: 0 !important; + padding: 0 !important; + `; // Auto-hide after 1 second this.showTimeout = setTimeout(() => { 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 4f56bd92..7e0454d8 100644 --- a/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx +++ b/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx @@ -2624,6 +2624,7 @@ function VideoJSPlayer({ videoId = 'default-video' }) { // BEGIN: Add Seek Indicator Component customComponents.current.seekIndicator = new SeekIndicator(playerRef.current, { seekAmount: 5, // 5 seconds seek amount + isEmbedPlayer: isEmbedPlayer, // Pass embed mode flag }); // Add the component but ensure it's hidden initially playerRef.current.addChild(customComponents.current.seekIndicator); diff --git a/frontend-tools/video-js/src/styles/embed.css b/frontend-tools/video-js/src/styles/embed.css index a2062a03..ca9cee03 100644 --- a/frontend-tools/video-js/src/styles/embed.css +++ b/frontend-tools/video-js/src/styles/embed.css @@ -142,3 +142,37 @@ #page-embed .video-js-root-embed .video-js.vjs-user-inactive:not(.vjs-paused):not(.vjs-ended) .vjs-progress-control { opacity: 0 !important; } + +/* ===== EMBED-SPECIFIC SEEK INDICATOR POSITIONING ===== */ +/* Ensure play icon (SeekIndicator) stays centered in embed view regardless of window size */ +#page-embed .video-js-root-embed .video-js .vjs-seek-indicator { + position: fixed !important; + top: 50vh !important; + left: 50vw !important; + transform: translate(-50%, -50%) !important; + z-index: 10000 !important; + pointer-events: none !important; + display: none !important; + align-items: center !important; + justify-content: center !important; + opacity: 0 !important; + visibility: hidden !important; + transition: opacity 0.2s ease-in-out !important; + width: auto !important; + height: auto !important; + margin: 0 !important; + padding: 0 !important; +} + +/* ===== EMBED-SPECIFIC BIG PLAY BUTTON POSITIONING ===== */ +/* Ensure big play button stays centered in embed view regardless of window size */ +#page-embed .video-js-root-embed .video-js .vjs-big-play-button { + position: fixed !important; + top: 50vh !important; + left: 50vw !important; + transform: translate(-50%, -50%) !important; + z-index: 1000 !important; + pointer-events: auto !important; + margin: 0 !important; + padding: 0 !important; +}