commit 1

src/VideoPlayer.js

@@ -0,0 +1,55 @@
+import React, { Component } from 'react'; // eslint-disable-line no-unused-vars
+import YouTube from 'react-youtube'; // eslint-disable-line no-unused-vars
+/* eslint no-console: ["error", { allow: ["info", "error"] }] */
+
+class VideoPlayer extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			opt: {
+				// height: '390',
+				// width: '640',
+				playerVars: {
+					// https://developers.google.com/youtube/player_parameters
+					autoplay: 0,
+					modestbranding: 1
+				}
+			}
+		};
+	}
+
+	render() {
+		return (
+			<React.Fragment>
+				<YouTube
+					opts={this.state.opt}
+					videoId={
+						this.props.match.params.id ? this.props.match.params.id : '3AVWJzHvhFE' // or null
+					}
+					onReady={this._onReady}
+					onPlay={this._onPlay}
+					onError={this._onError}
+					className="embed-responsive-item"
+					containerClassName="embed-responsive embed-responsive-16by9"
+				/>
+			</React.Fragment>
+		);
+	}
+	_onError(event) {
+		console.error('on error', event);
+		// console.error(event);
+	}
+	_onPlay(event) {
+		console.info('on play',event.target.getDuration(), event);
+		// console.warn(event.target.getDuration());
+	}
+	_onReady(event) {
+		// access to player in all event handlers via event.target
+		//event.target.pauseVideo();
+		console.info('on ready', event);
+		// console.warn(event);
+		// console.warn(event.target.getDuration());
+	}
+}
+
+export default VideoPlayer;