Embed player will make the parent page scroll when loading

[lionep]

Describe the issue
In a long page, with the embed player out of the main view, the parent page will autoscroll to the video when iframe is loaded

To Reproduce
Steps to reproduce the issue:

1. Create a long HTML page body: { height: 5000px; }
2. Place an embed player iframe in it, out of view : <iframe style="position: absolute; top: 4000px" ... />
3. Open page and reload page
4. See error : parent page will autoscroll to center iframe in view

Expected behavior
Parent page should not be controlled by iframe

Environment:

• OS: mac OS
• Browser : chrome

Additional context
Line of code possibly responsible for this behavior :

mediacms/frontend/src/static/js/components/VideoJS/VideoJSEmbed.jsx

Lines 179 to 183 in 8725713

	videoElement.scrollIntoView({
	behavior: 'smooth',
	block: 'center',
	inline: 'nearest'
	});

Related issue from W3C : w3c/csswg-drafts#7134

A query param to control this behavior would be a nicetohave, if it's a wanted feature.

[mrjoshuap]

Problem Analysis

The embed player iframe causes the parent page to auto-scroll when loading because:

Primary Issue:

In frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx at lines 2080-2088, the video element receives focus when the player is ready. When an element inside an iframe is focused, browsers may scroll the parent page to bring it into view.

Secondary Issue:

The scrollIntoView call in frontend/src/static/js/components/VideoJS/VideoJSEmbed.jsx at lines 179-183 is for timestamp clicks, but it may also affect parent page scrolling when used within an iframe context.

Solution Strategy

Prevent focus on embed players:

Skip the focus() call in VideoJSPlayer.jsx when isEmbedPlayer is true (the component already detects this via videoId === 'video-embed').

Make scrollIntoView conditional:

Update the timestamp click handler in VideoJSEmbed.jsx to only scroll when not in an iframe context, or add a query parameter to control this behavior.

Add query parameter support:

Implement an optional scroll query parameter (e.g., ?scroll=1) to allow users to opt-in to scrolling behavior if desired.

Implementation Steps

Step 1: Fix VideoJSPlayer focus behavior

Modify frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx
At lines 2080-2088, conditionally skip videoElement.focus() when isEmbedPlayer is true
Keep the tabindex attribute for accessibility, but don't auto-focus

Step 2: Update VideoJSEmbed scrollIntoView

1. Modify frontend/src/static/js/components/VideoJS/VideoJSEmbed.jsx
2. Check if running in an iframe context (window.parent !== window)
3. Only call scrollIntoView if:

• Not in an iframe, OR
• A scroll query parameter is present and set to '1'

Step 3: Testing

1. Create a test HTML page with a long scrollable body
2. Embed the player iframe positioned below the viewport
3. Verify parent page does not auto-scroll on load
4. Test timestamp click behavior with and without query parameter
5. Test across Chrome, Firefox, and Safari

Files to Modify

• frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx - Remove auto-focus for embed players
• frontend/src/static/js/components/VideoJS/VideoJSEmbed.jsx - Make scrollIntoView conditional

Expected Outcome

• Parent pages will no longer auto-scroll when embed player iframes load
• Timestamp clicks will only scroll parent page when explicitly requested via query parameter
• Keyboard controls will still work for embed players (tabindex remains, just no auto-focus)

[mgogoulos]

@Yiannistaos can you help with triaging this?

[Yiannistaos]

@mgogoulos Sure, I'll take a look!

[Yiannistaos]

Thanks @lionep and @mrjoshuap
Confirmed and tested here https://jsfiddle.net/Yiannistaos/mup9sL4a/
Fixed here cdfcf4d
This PR will be merged within the next few days.

[github-actions]

🎉 This issue has been resolved in version 7.4.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀