title: Duplicate YouTube iframe embed video playback
body: <p>I'm using <a href="https://www.npmjs.com/package/react-youtube" rel="nofollow noreferrer">react-youtube</a> (essentially <a href="https://developers.google.com/youtube/iframe_api_reference" rel="nofollow noreferrer">YouTube iframe embed API</a>) in order to render a video player in my web app.</p>
  <p>My web app opens a popup window on load, using <code>window.open()</code>. It's the same origin so both windows can interact by code and I can manipulate the popup DOM.</p>
  <p>I want to clone the original video (video A) from the base web app player, to a separate <code>&lt;video&gt;</code> 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).</p>
  <p>I know it can be done by duplicating the whole player and using the <code>onPlay</code>, <code>onPause</code> 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.<br />
  Obviously cloning by drawing with a Canvas is not a good solution.</p>
  <p>I also tried using <a href="https://developers.google.com/youtube/iframe_api_reference#Accessing_and_Modifying_DOM_Nodes" rel="nofollow noreferrer">player.getIframe()</a> and to the <code>&lt;video&gt;</code> element using <code>iframe.contentWindow.document.getElementsByClassName(&quot;video-stream html5-main-video&quot;)</code>,<br />
  (to then capture its stream), but then I'm getting:<br />
  <code>SecurityError: Blocked a frame with origin &quot;http://localhost:3000&quot; from accessing a cross-origin frame</code>.</p>
  <p>Is there any way to do it?</p>