JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://www.youtube.com/iframe_api"></script>
<div data-video="Mh-eN--JK8Q" data-autoplay="0" data-loop="1" id="youtube-audio">
</div>

CSS

.play {
  cursor: pointer;
}

.play:before {
  content: attr(data-text);
}

JavaScript

/* 
 YouTube Audio Embed 
 --------------------
 
 Author: Amit Agarwal
 Web: http://www.labnol.org/?p=26740 
*/

function onYouTubeIframeAPIReady() {
  var e = document.getElementById("youtube-audio"),
    t = document.createElement("div");
  t.setAttribute("class", "play"), t.style.cssText = "cursor:pointer;cursor:hand", e.appendChild(t);
  var a = document.createElement("div");
  a.setAttribute("id", "youtube-player"), e.appendChild(a);
  var o = function(e) {
    var a = e ? "Stop" : "Play";
    t.setAttribute("data-text", a)
  };
  e.onclick = function() {
    r.getPlayerState() === YT.PlayerState.PLAYING || r.getPlayerState() === YT.PlayerState.BUFFERING ? (r.pauseVideo(), o(!1)) : (r.playVideo(), o(!0))
  };
  var r = new YT.Player("youtube-player", {
    height: "0",
    width: "0",
    videoId: e.dataset.video,
    playerVars: {
      autoplay: e.dataset.autoplay,
      loop: e.dataset.loop
    },
    events: {
      onReady: function(e) {
        r.setPlaybackQuality("small"), o(r.getPlayerState() !== YT.PlayerState.CUED)
      },
      onStateChange: function(e) {
        e.data === YT.PlayerState.ENDED && o(!1)
      }
    }
  })
}