JSFiddle - React, Tailwind, and code Playground

by Bhabani Raju

HTML

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

<script src="http://www.youtube.com/player_api"></script>

<script>
  // create youtube player
  var player;

  function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: '0Bmhjf0rKe8',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

  // autoplay video
  function onPlayerReady(event) {
    event.target.playVideo();
  }
/*

-1 (unstarted)
0 (ended)
1 (playing)
2 (paused)
3 (buffering)
5 (video cued)

*/
  // when video ends start and paused
  function onPlayerStateChange(event) {
    if (event.data === -1) {
      console.log('no started');
    } else if (event.data === 1) {
      console.log('play');
    } else if (event.data === 2) {
      console.log('pause');
    }
  }

</script>