Duplicate YouTube iframe embed video playback

Question

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 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.

I also tried using player.getIframe() and to the element using iframe.contentWindow.document.getElementsByClassName("video-stream html5-main-video"),
(to then capture its stream), but then I'm getting:
SecurityError: Blocked a frame with origin "http://localhost:3000" from accessing a cross-origin frame.

Is there any way to do it?

user_1185394 · Answer

You should try captureStream() - it captures a MediaStream from one element, so you can set it as the srcObject of another element.

See this demo and article

user_13174850 · Answer

You can use local storage for that.

/* First create a click event to save the command to local storage */
$(".test-btn").click(function() {
  let action = $(this).data("action");
  localStorage.setItem('vid_state', action);
});


/* on the other window listen for the change in storage */
$(window).on('storage', function(e) {
  let storageEvent = e.originalEvent;
  if (storageEvent.key == 'vid_state') {
    let action = localStorage.getItem('vid_state');
    console.log(action);
    $("#vid").html(action);
  }
});






Current Play State

Duplicate YouTube iframe embed video playback

2 Answers