JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="youtube" data-embed="AqcjdkPMPJA">
</div>

<button type="button" class="pause">Pause</button>

CSS

.wrapper {
    max-width: 400px;
  }
  .youtube {
    background-color: #000;
    position: relative;
    padding-top: 56.25%;
    overflow: hidden;
    cursor: pointer;
  }
  .youtube img,
  .youtube iframe {
    position: absolute;
  }
  .youtube iframe {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
  }

JavaScript

'use strict';

var player;

// Call the youtube api
var tag = document.createElement('script');
tag.id = 'iframe-demo';
tag.src = 'https://www.youtube.com/iframe_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// Is the api ready
function onYouTubeIframeAPIReady() {
  console.log('api is ready');
}

(function() {

  var youtube = document.querySelectorAll( ".youtube" );

  for (var i = 0; i < youtube.length; i++) {

    youtube[i].addEventListener( "click", function() {

      var iframe = document.createElement( "iframe" );

      iframe.setAttribute( "id", "test-api" );
      iframe.setAttribute( "frameborder", "0" );
      iframe.setAttribute( "allowfullscreen", "" );
      iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?rel=0&showinfo=0&autoplay=1&enbalejsapi=1" );

      this.innerHTML = "";
      this.appendChild( iframe );

      player = new YT.Player('test-api');

      console.log(player);
    } );

  }

  var pause = document.querySelector('.pause');

  pause.addEventListener('click', function() {
    player.pauseVideo();
  });



})();