body { text-align: center; } button { font-size: 2rem; margin: 1rem auto; }

by Simon Hi

HTML

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

<div id="player"></div>

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', {
    height: '180',
    width: '320',
    videoId: 'Og2iXhOcE6Y',
    events: {
      'onStateChange': onPlayerStateChange
    }
  });
}


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