JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://www.youtube.com/iframe_api"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div data-video="Mh-eN--JK8Q" data-autoplay="0" data-loop="1" id="youtube-audio1">
</div>
<div data-video="Mh-eN--JK8Q" data-autoplay="0" data-loop="1" id="youtube-audio2">
</div>
<div data-video="Mh-eN--JK8Q" data-autoplay="0" data-loop="1" id="youtube-audio3">
</div>

CSS

.ytplayer-play:before,
.ytplayer-stop:before {
  display: inline-block;
  font-family: FontAwesome;
  cursor: pointer;
}

.ytplayer-play:before { content: '\f04b'; }
.ytplayer-stop:before { content: '\f04d'; }

JavaScript

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

function onYouTubeIframeAPIReady(name) {
  var e = document.getElementById(name),
    t = document.createElement("div");
 e.appendChild(t);
  var a = document.createElement("div");
  a.setAttribute("id", "youtube-player"), e.appendChild(a);
  var o = function(e) {
    var a = e ? "ytplayer-stop" : "ytplayer-play";
    t.className=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)
      }
    }
  })
}

onYouTubeIframeAPIReady("youtube-audio1");
onYouTubeIframeAPIReady("youtube-audio2");
onYouTubeIframeAPIReady("youtube-audio3");