JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<div id="play">PLAY</div>
<div id="pause">PAUSE</div>

    <iframe id="video" type="text/html" width="640" height="360" src="http://www.youtube.com/embed/sftuxbvGwiU?hd=1&rel=0&autohide=1&showinfo=0&enablejsapi=1" frameborder="0" allowfullscreen></iframe>



</body>

CSS

#play,#pause{ font-family: Tahoma;letter-spacing:1px;font-size:11px;color: #666;width: 80px;text-align: center;height: 20px;line-height: 20px;background-color: #ccc;cursor: pointer;}
#play {position:absolute;top: 20px;left:20px;}
#pause{position: absolute;top:20px;left: 150px;}
#pause{position: absolute;top:20px;left: 150px;}

#video{position:absolute;top:100px;left:20px;}

JavaScript

var player;

function onYouTubePlayerAPIReady() {
    player = new YT.Player('video', {
      height: '200',
      width: '200',
      playerVars: { 'autoplay': 1, 'controls': 0 },
      videoId: 'sftuxbvGwiU',
      events: {
        'onReady': onPlayerReady
      }
    });
}

function onPlayerReady(event){
  event.target.playVideo();
    $("#play").on('click', function() {
      player.playVideo();
    });
    $("#pause").on('click', function() {
      player.stopVideo();
    });
  }

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