JSFiddle - React, Tailwind, and code Playground

by Sebastian Kay

HTML

<br>
<div id="video-container">
  <div id="video"></div>
</div>
<br>
<button type="button" class="yt-play" id="yt-play">Play</button>

JavaScript

$(document).ready(function() {
	loadYouTubeApi();
});

var videoIDs = Array('a70_QmnjhCU');
var yPlayer;

function loadYouTubeApi() {

  var tag = document.createElement('script');

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

  videoID = videoIDs[Math.floor(Math.random() * videoIDs.length)];

}

function onYouTubeIframeAPIReady() {
  yPlayer = new YT.Player('video', {
    height: '1080',
    width: '1920',
    //videoId: 'M7lc1UVf-VE',
    videoId: videoID,
    playerVars: {
        controls: '0',
        autoplay: '1',
        loop: '1',
        rel: '0',
        showinfo: '0',
        autohide: '1',
        wmode: 'transparent',
        hd: '1',
        mute: '1',
        enablejsapi: '1'
      },
    events: {
      'onReady': onPlayerReady
    }
  });
}

function onPlayerReady(event) {
  yPlayer.setPlaybackRate(1);
  //event.target.playVideo();

  yPlayer.playVideo();
  //yPlayer.mute();

}





$(".yt-play").on("click", function() {
	var state = yPlayer.getPlayerState();
  if(state==1){
      yPlayer.pauseVideo();
      $("#yt-play").html('Play');
    }else{
      yPlayer.playVideo();
      $("#yt-play").html('Pause');
    }
});