title: Extracting play function of react-youtube in state to use in button oncluck results in CORS
body: <p>I am using <a href="https://www.npmjs.com/package/react-youtube" rel="nofollow noreferrer">react-youtube</a> library from npm in my react project. I want to play and pause YouTube video on button onClick event.<br/>
  I have tried extracting the event as well as function from YouTube component to state, and later calling that function via a button onClick but it results in cross origin error &quot;Uncaught Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development. See <a href="https://reactjs.org/link/crossorigin-error" rel="nofollow noreferrer">https://reactjs.org/link/crossorigin-error</a> for more.&quot;<br/>
  What am I doing wrong?
  And how do I fire YouTube component event from another component like a button?</p>
  <pre><code>import './App.css';
  import YouTube from 'react-youtube';
  import React, { Component } from 'react';
  
  
  class App extends Component {
    constructor(props){
      super(props);
      this.state = {
        playerPlayVideo: () =&gt; {}
      }
      this.videoOnReady = this.videoOnReady.bind(this);
    }
  
    videoOnReady(event) {
      // access to player in all event handlers via event.target
      this.setState({
        playerPlayVideo: event.target.playVideo
      });
    }
  
    render() { 
      const opts = {
        height: '390',
        width: '640',
      };
  
      return ( 
        &lt;div&gt;
          &lt;YouTube videoId=&quot;2g811Eo7K8U&quot; opts={opts} onReady={this.videoOnReady} /&gt;
          &lt;button onClick={this.state.playerPlayVideo}&gt;play&lt;/button&gt;
        &lt;/div&gt;
      );
    }
  }
   
  export default App;
  </code></pre>