React iframe video player not auto-progressing to next video (external source inside iframe)

Question

I'm building a custom React video player that uses an to load external video players (like this sample link). I want the app to automatically go to the next video when the current one ends — but since the video is embedded from a third-party iframe, I can't detect the video end event.

🔍 What I'm trying to do: Load an external video player inside an iframe

1.When the video ends, automatically go to the next one (call onNext() function)

📜 Current Setup: Here’s a snippet from my custom component:

<iframe
  ref={iframeRef}
  src={actualVideoUrl}
  className="w-full h-full"
  frameBorder="0"
  allowFullScreen
  allow="autoplay; encrypted-media; fullscreen"
  onLoad={handleIframeLoad}
/>

The full VideoPlayer.tsx has custom controls and attempts to detect when the video ends, but since it's loaded from an external site, I'm unable to hook into any playback events.

❌ What I’ve tried (none of these worked): Using onLoad – only detects iframe load, not video playback status.

1.Using postMessage API – iframe source doesn't support communication.

2.MutationObserver – changes inside the iframe are not accessible due to cross-origin policy.

3.Timer-based guess – not reliable or accurate since durations vary.

✅ What I'm looking for:

1.A way to detect when the video inside an external iframe finishes playing to play the next one

2.Or any workaround/hack to trigger onNext() after the video ends

3.It’s important that iframe content remains clickable and interactive

🔗 Sample external video link: 👉 https://moivenm.rpmvip.com/#y6p11

🛠 Tech stack: React + TypeScript

Tailwind CSS

Video is embedded from 3rd party players.

🙏 Any suggestions or creative workarounds are welcome! Even if this requires a proxy layer or hacky solution, I’d love to hear your thoughts.

Simon · Accepted Answer · 2025-07-15 02:54:34Z

0

The problem with a plain iframe is that your React component cannot know when the video has finished playing.

Good thing is you don't need a hacky solution, you can fix this with the react-player library that has an onEnded prop.

Just change your actualVideoUrl state with onEnded callback, and set playing to true if you want the next video to autoplay.

answered Jul 15 at 2:54

Simon

4187 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React iframe video player not auto-progressing to next video (external source inside iframe)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related