Skip to content

Instantly share code, notes, and snippets.

@BTMPL
Created October 11, 2017 15:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save BTMPL/79adfe2767033ff2ab69779562346ee8 to your computer and use it in GitHub Desktop.
Save BTMPL/79adfe2767033ff2ab69779562346ee8 to your computer and use it in GitHub Desktop.
diff --git a/video_browser/src/components/video_detail.js b/video_browser/src/components/video_detail.js
index cb767d5..75ec611 100644
--- a/video_browser/src/components/video_detail.js
+++ b/video_browser/src/components/video_detail.js
@@ -1,12 +1,12 @@
import React from "react";
-const VideoDetail = ({ video }) => {
+const VideoDetail = ({ video, autoplay = false }) => {
if (!video) {
return <div>Loading...</div>;
}
const videoId = video.id.videoId;
- const url = `https://www.youtube.com/embed/${videoId}`;
+ const url = `https://www.youtube.com/embed/${videoId}?autoplay=${autoplay}`;
return (
<div className="video-detail col-md-8">
diff --git a/video_browser/src/index.js b/video_browser/src/index.js
index c3908c8..1034dd3 100644
--- a/video_browser/src/index.js
+++ b/video_browser/src/index.js
@@ -13,7 +13,8 @@ class App extends Component {
this.state = {
videos: [],
- selectedVideo: null
+ selectedVideo: null,
+ play: false
};
this.videoSearch("surfboards");
@@ -22,6 +23,7 @@ class App extends Component {
videoSearch(term) {
YTSearch({ key: API_KEY, term: term }, videos => {
this.setState({
+ play: false,
videos: videos,
selectedVideo: videos[0]
});
@@ -36,9 +38,12 @@ class App extends Component {
return (
<div>
<SearchBar onSearchTermChange={videoSearch} />
- <VideoDetail video={this.state.selectedVideo} />
+ <VideoDetail video={this.state.selectedVideo} autoplay={this.state.play} />
<VideoList
- onVideoSelect={selectedVideo => this.setState({ selectedVideo })}
+ onVideoSelect={selectedVideo => this.setState({
+ play: true,
+ selectedVideo
+ })}
videos={this.state.videos}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment