way more robust

render-video-player.jsx

  renderVideoPlayer: function () {
    // Assume it's an http string, do this: https://gist.github.com/jlong/2428561
    // if the link is a youtube or vimeo link, embed it, else do nothing
    var reel_link = this.state.item.reel_link;
    var link = document.createElement('a');
    link.href = reel_link;

    var embed_link;

    switch (link.hostname) {
      case 'youtube.com':
        //assume the querystring starts with '?', trim that, then split it by a & delimiter
        var querystring = link.search.slice(1).split('&');
        var id = '';
        querystring.forEach(function(pair) {
          if (pair.split('=').length > 0) {
            var id = pair.split('=')[1];
          }
        })
        embed_link = ['https://youtube.com/embed', id].join('/');
        break;

      case 'vimeo.com':
        //gets the first part of the pathname
        var id = link.pathname.slice(1).split('/')[0];
        embed_link = ['https://player.vimeo.com/video', id].join('/');
        break;

      default:
        embed_link = false;
    }
    var $player = (reel_link)
      ? (
        <div className="video_player">
          <iframe
            className="video_player--video"
            src={embed_link}
            frameBorder="0"
            allowFullScreen
          ></iframe>
        </div>
        )
      : '';

    return(
      <div className="col-sm-9 text-center">
        {$player}
      </div>
    );
  },