JSFiddle - React, Tailwind, and code Playground

HTML

<div id="holder"></div>
<div id="holder2"></div>
<a id="rp" href="#">reparent</a>

CSS

#holder {
  position:relative;
  width: 320px;
  height: 240px;
}
#holder2 {
  position:relative;
  width: 320px;
  height: 240px;
}

JavaScript

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;
var interval = setInterval(function() {
  if (window.YT && window.YT.Player) {
    if (interval) clearInterval(interval);
    player = new YT.Player('holder', {
      height: '390',
      width: '640',
      videoId: 'M7lc1UVf-VE',
      events: {
        'onReady': onPlayerReady
      }
    });
  }
}, 100);

function onPlayerReady(event) {
console.log('onPlayerReady')
  event.target.playVideo();
}

document.getElementById("rp").onclick = function(){
	  var p = document.getElementById("holder");
    document.getElementById("holder2").appendChild(p); 
}