JSFiddle - React, Tailwind, and code Playground

by Matt

HTML

<div id="root" style="position: relative; width: 100%; height: 100%;">
  <div style="position: absolute; top: 0px; left: 0px; transform: translate3d(332.5px, 479px, 0px) scale(1); transform-origin: 0px 0px; z-index: 16695054;">
    <div style="position: absolute; transform: translate3d(-50%, -50%, 0px);">
      <div>
        <button>
          <h1>Play Video</h1>
        </button>
      </div>
      <div style="width: 600px; height: 300px;">
        <div id="target" style="width: 100%; height: 100%;">
        </div>
      </div>
    </div>
  </div>
</div>

CSS

html, body {
  height: 100%;
  width: 100%;
}

JavaScript

// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');

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

// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
var player;

function onYouTubeIframeAPIReady() {
  player = new YT.Player('target', {
    height: '390',
    width: '640',
    videoId: 'M7lc1UVf-VE',
    playerVars: {
      'playsinline': 1
    }
  });
}

button = document.querySelector("button")
button.onclick = () => {
	player.playVideo()
}