Skip to content

Instantly share code, notes, and snippets.

@mathisonian mathisonian/youtube.js
Last active Aug 23, 2018

Embed
What would you like to do?
Idyll Youtube Component
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;
@mathisonian

This comment has been minimized.

Copy link
Owner Author

commented Aug 23, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.