JSFiddle - React, Tailwind, and code Playground

by Bertrand Martel

HTML

<iframe id="video" src="https://www.youtube.com/embed/CaksNlNniis?enablejsapi=1&html5=1&" frameborder="0" allowfullscreen="0"></iframe>
<input id="pause" type="submit" value="pause" />
<input id="play" type="submit" value="play" />

JavaScript

var player;

function onYouTubeIframeAPIReady() {
  player = new YT.Player('video', {
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

function onPlayerStateChange(event){
	if (event.data == YT.PlayerState.PAUSED) {
    console.log(player.getCurrentTime());
  }
}

function onPlayerReady(event) {
  document.getElementById("pause").addEventListener("click", function() {
    player.pauseVideo();
  });
  document.getElementById("play").addEventListener("click", function() {
    player.playVideo();
  });
}

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