Duplicate YouTube iframe embed video playback

I’m using react-youtube (essentially YouTube iframe embed API) in order to render a video player in my web app.

My web app opens a popup window on load, using window.open(). It’s the same origin so both windows can interact by code and I can manipulate the popup DOM.

I want to clone the original video (video A) from the base web app player, to a separate <video> element, located in the popup window (video B), so that it will correspond to all the user actions in the original video player (play, pause, seek, change quality, etc).

I know it can be done by duplicating the whole player and using the onPlay, onPause and other callbacks to trigger the same actions in the second player – but the ideal solution for me would be to just clone the video output itself.
Obviously cloning by drawing with a Canvas is not a good solution.

Is there any way to do it?

43 thoughts on “Duplicate YouTube iframe embed video playback”

Leave a Comment