Idyll Youtube Component

youtube.js

import React from 'react';
let YouTube;

class YoutubeComponent extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      mounted: false
    }
  }

  componentDidMount() {
    this.setState({ mounted: true });
    YouTube = require('react-youtube').default;
  }

  render() {
    if (!this.state.mounted) {
      return null;
    }

    const opts = {
      height: this.props.height,
      width: this.props.width,
      playerVars: Object.assign({}, { // https://developers.google.com/youtube/player_parameters
        autoplay: this.props.play
      }, this.props.options)
    };

    return (
      <div style={{display: 'block', textAlign: 'center'}}>
        <YouTube
          videoId={this.props.id}
          opts={opts}
          onReady={this._onReady.bind(this)}
        />
      </div>
    );
  }

  componentDidUpdate(props, newState) {
    if (this._player && props.play !== this.props.play) {
      this.props.play ? this._player.playVideo() : this._player.pauseVideo();
    }
    if (this._player && props.audio !== this.props.audio) {
      this.props.audio ? this._player.unMute() : this._player.mute();
    }
  }

  _onReady(event) {
    this._player = event.target;
    if (!this.props.audio) {
      this._player.mute();
    }
    this.props.onReady && this.props.onReady();
  }
}

module.exports = YoutubeComponent;

Usage:

1. Make sure react-youtube is installed (npm i --save react-youtube),
2. Add this file to your components/ directory

Then include it Idyll markup like,

[Youtube id:"videoID" play:true audio:true width:500 height:300 options:`{ controls: 1 }` /]

All of the parameters are optional except for id, which must be provided. See all available options at https://developers.google.com/youtube/player_parameters