title: Vimeo API with ReactJS and Plyr
body: <p>I have a React component that uses the <a href="https://github.com/selz/plyr" rel="nofollow noreferrer">https://github.com/selz/plyr</a> media player. Everything works fine until the component unmounts, which results in an error from the Vimeo API. Specifically: <code>Uncaught (in promise) TypeError: Cannot read property 'postMessage' of null</code>. </p>
  
  <p>After this error occurs, I try to load the module again it will fail due to <code>this.player</code> being <code>undefined</code>, but if you destroy that, and try again it will load. Perhaps the React Tree is saving the first iteration of the component, and I need to completely destroy it somehow?</p>
  
  <p>Here's my component:</p>
  
  <pre><code>import React, {Component, PropTypes} from 'react';
  import {findDOMNode} from 'react-dom';
  import plyr from 'plyr';
  
  /**
   * @desc Regex to retrieve the Vimeo video ID from the URL.
   * @type {RegExp}
   */
  const regex = /^.*(vimeo\.com\/)((channels\/[A-z]+\/)|(groups\/[A-z]+\/videos\/))?([0-9]+)/g;
  
  export default class Vimeo extends Component {
  
    static propTypes = {
      url: PropTypes.string.isRequired,
    };
  
    constructor(props) {
      super(props);
      // Use regex to get the video id from the url
      this.videoId = regex.exec(this.props.url);
    }
  
    /*
     |--------------------------------------------------------------------------
     | Digest Cycle
     |--------------------------------------------------------------------------
     */
  
    /**
     * @desc Initiate video player.
     */
    componentDidMount() {
      this.player = plyr.setup(findDOMNode(this), {
        controls: [],
        autoplay: true,
        loop: true,
        mute: true,
      });
      this.player[0].on('ready', () =&gt; {
        // Mute the video
        if (!this.player[0].isMuted()) {
          this.player[0].toggleMute();
        }
      });
    }
  
    /**
     * @desc Destroy video player
     */
    componentWillUnmount() {
      this.player[0].destroy();
    }
  
    /*
     |--------------------------------------------------------------------------
     | Render
     |--------------------------------------------------------------------------
     */
  
    render() {
      let player = null;
      if (typeof this.videoId !== 'undefined' &amp;&amp; this.videoId !== null) {
        player = (
          &lt;div&gt;
            &lt;div
              data-type="vimeo"
              data-video-id={this.videoId}
            /&gt;
          &lt;/div&gt;
        );
      }
  
      return player;
    }
  }
  </code></pre>