Youtube video status 2

by Simon Hi

HTML

<button type="button" onclick="magic()">
  Video status
</button>

<iframe id="player" src="https://www.youtube.com/embed/Og2iXhOcE6Y?enablejsapi=1" height="175px" width="325px"></iframe>

CSS

body {
  text-align: center;
}

button {
  font-size: 2rem;
  margin: 1rem auto;
}

JavaScript

var status = "stopped";

function magic() {
  alert(status); // stopped or running
}

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

tag.src = 'https://www.youtube.com/iframe_api';

var firstScriptTag = document.getElementsByTagName('script')[0];

firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;

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

function onPlayerStateChange(event) {
  if (event.data == YT.PlayerState.PLAYING) {
    status = "running";
  } else status = "stopped";
}