<html>
  <body>
    <iframe id="player" type="text/html" width="640" height="390"
      src="http://www.youtube.com/embed/308nBBeRV24?enablejsapi=1&html5=1"
        frameborder="0"></iframe>
    <br>
    Player status: <span id='playerStatus'>Unstarted</span>
    <br>
    Playback quality: <span id='playbackQuality'>None</span>
    <script>
      var tag = document.createElement('script');
      tag.src = "//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: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange,
            'onPlaybackQualityChange': onQualityChange
          }
        });
      }
      function onPlayerReady(event) {
        playerStatus.innerHTML = 'Ready';
        event.target.playVideo();
      }
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING) {
          playerStatus.innerHTML = 'Playing';
        } else if (event.data == YT.PlayerState.BUFFERING) {
          playerStatus.innerHTML = 'Buffering';
        } else if (event.data == YT.PlayerState.PAUSED) {
          playerStatus.innerHTML = 'Paused';
        } else if (event.data == YT.PlayerState.CUED) {
          playerStatus.innerHTML = 'Video Cued';
        } else if (event.data == YT.PlayerState.ENDED) {
          playerStatus.innerHTML = 'Ended';
        } else {
          playerStatus.innerHTML = 'Undefined';
        }
      }
      function onQualityChange(event) {
        playbackQuality.innerHTML = player.getPlaybackQuality();
      }
    </script>
  </body>
</html>