Intermittent events trigger for Youtube video played in Iframe

I am trying to handle the ‘onStateChange’, ‘onReady’ and ‘onError’ events, this events are not triggered sometime and are triggered Intermittently. I seek an expert advice here, am I doing anything wrong? Kindly guide me. I have seen multiple similar issues in stackoverflow but non of them had similar problem statement, hence I am posting my case here.

initializePlayer() {
  window['YT'] = null;
  const tag = document.createElement('script');
  tag.src = 'https://www.youtube.com/iframe_api';
  tag.id = 'youtubeVideoId';
  const firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  window['onYouTubeIframeAPIReady'] = () => this.startVideo();
}

startVideo() {
    console.log("video started");
  this.player = new window['YT'].Player('player', {
    videoId: 'y881t8ilMyc',
    events: {
      'onStateChange': this.onPlayerStateChange,
      'onReady': this.onPlayerReady,
      'onError': this.onPlayerError,
    }
  });
}

onPlayerError(event){
    console.log("Error in video:"+event.data);
}

onPlayerReady(event){
    console.log('onready in video play:'+event.data);
}

onPlayerStateChange(event) {
    console.log("onPlayerStateChange:"+event.data);
    switch (event.data) {
        case window['YT'].PlayerState.ENDED:
            this.videoEndTriggerClick();
            break;
    }
}