Youtube Player iFrame API

by michae1

HTML

<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>

JavaScript

// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');

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

// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        height: '390',
        width: '640',
        videoId: 'M7lc1UVf-VE',
        events: {
            onReady: onPlayerReady,
            onStateChange: onPlayerStateChange
        }
    });
}

// 4. The API will call this function when the video player is ready.
function onPlayerStateChange(event) {
	console.log('state changed', event.data)
}
function onPlayerReady(event) {
    console.log('player ready')
    console.log('1',event.target.getPlayerState())
    setTimeout(()=>{
	    console.log('2',event.target.getPlayerState())
      event.target.playVideo()
      console.log('3',event.target.getPlayerState())
    }, 1000)
     window.playerObj = event.target
}