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;    }}