Extracting Play Function Of React-youtube In State To Use In Button Oncluck Results In Cors

I am using react-youtube library from npm in my react project. I want to play and pause YouTube video on button onClick event. I have tried extracting the event as well as function

Solution 1:

'react-youtube' uses YouTube Api internally. The actions that the player performs are based on event.target. You are saving the callback function playVideo in a state, which is possibly causing scope issues.

In this case instead of storing the 'playVideo' function in state you can simply store event.target object in state.

this.state = {
  playerPlayVideo: {},
};

Then on button click you can simply call playVideo like this,

<buttononClick={() => this.state.playerPlayVideo.playVideo()}>
   play
</button>

This works!! I have tested it.

You can then make this better by having a toggle state logic as well since you are now storing event.target in state directly. Therefore you can now call both 'playVideo' as well as 'pauseVideo'