Welcome folks today in this blog post we will be searching youtube videos
using youtube data api v3
in react.js using axios
library. All the full source code of the application is shown below.
LIVE DEMO
Get Started
In order to get started you need to make a new react.js
project using the below command
npx create-react-app sampleapp
cd sampleapp
npm i axios
And now you will see the below directory
structure of the react.js
app as shown below
And now first of all you need to make the apis
folder and inside it you need to make the Youtube.js
file and copy paste the following code
apis/Youtube.js
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import axios from "axios"; const KEY = "AIzaSyDNe-EwKY81Imo8_AyAvMBnKbvaBYFqbNs"; export default axios.create({ baseURL: "https://www.googleapis.com/youtube/v3", params: { part: "snippet", type: "video", maxResult: 5, key: KEY } }); |
As you can see we are importing the axios
library at the top and then you need to replace your own api_key
from google cloud console and enable the Youtube Data API V3 and then we are making a get
request to youtube api to search
for videos and we are passing the maxResult
to 5.
And now you need to make the components
folder and inside it you need to make the App.js
file and copy paste the following code
Components/App.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
import React from "react"; import SearchBar from "./SearchBar"; import Youtube from "../apis/Youtube"; import VideoList from "./VideoList"; import VideoDetail from "./VideoDetail"; class App extends React.Component { state = { videos: [], selectedVideo: null }; componentDidMount(){ this.onTermSubmit('React JS'); } onTermSubmit = async (term) => { const results = await Youtube.get("/search", { params: { q: term }, }); this.setState({ videos: results.data.items, selectedVideo: results.data.items[0] }); }; onVideoSelect = (video) => { this.setState({ selectedVideo: video }); } render() { return ( <div className="ui container"> <SearchBar onSearchCallback={this.onTermSubmit} /> <div className="ui grid"> <div className="ui row"> <div className="eleven wide column"> <VideoDetail video={this.state.selectedVideo}/> </div> <div className="five wide column"> <VideoList videos={this.state.videos} onVideoSelect={this.onVideoSelect}/> </div> </div> </div> </div> ); } } export default App; |
As you can see we are loading all the components
which is used to display
the searched videos and we have also the suggested videos
section and then we have the searchbar
where the user can type anything and based upon that we retrieve the youtube
videos and display it as shown below
Now we need to make the SearchBar.js
component which will hold the searchbar and copy paste the following code
SearchBar.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
import React from 'react'; class SearchBar extends React.Component{ state = { term: "" }; onFormSubmit = (event) => { event.preventDefault(); this.props.onSearchCallback(this.state.term); }; render(){ return( <div className="search-bar ui segment"> <form className="ui form" onSubmit={this.onFormSubmit} > <div className="field"> <label> Video Search </label> <input type="text" value={this.state.term} onChange={(e) => this.setState({term: e.target.value})} /> </div> </form> </div> ); } } export default SearchBar; |
As you can see we have the simple input
field where we allow the user to search anything and we have binded
onchange event listener to capture the text
written by the user.
Now we need to make the VideoDetail.js
component where we will be embeding
the youtube video using the iframe
tag and display the title
and description of the youtube video as shown below
VideoDetail.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
import React from 'react'; const VideoDetail = ({ video }) => { if(!video){ return <div>Loadng...</div>; } const videoURL = `https://www.youtube.com/embed/${video.id.videoId}`; return ( <div> <div className="ui embed"> <iframe src={videoURL} title="Video Player"/> </div> <div className="ui segment"> <h4 className="ui header">{video.snippet.title}</h4> <p>{video.snippet.description}</p> </div> </div> ); }; export default VideoDetail; |
And now we need to make the VideoItem.js
file to render a single youtube video
inside the player
VideoItem.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import React from "react"; import "./VideoItem.css"; const VideoItem = ({ video, onVideoSelect }) => { return ( <div onClick={() => onVideoSelect(video)} className="video-item item"> <img className="ui image" alt={video.snippet.title} src={video.snippet.thumbnails.medium.url} /> <div className="content"> <div className="header">{video.snippet.title}</div> </div> </div> ); }; export default VideoItem; |
And now you need to make the VideoList.js
component where we will be rendering the list
of youtube videos using the for
loop as shown below
VideoList.js
1 2 3 4 5 6 7 8 9 10 11 12 |
import React from "react"; import VideoItem from "./VideoItem"; const VideoList = ({ videos, onVideoSelect }) => { const renderedList = videos.map((video) => { return <VideoItem key={video.id.videoId} video={video} onVideoSelect={onVideoSelect}/>; }); return <div className="ui relaxed divided list">{renderedList}</div>; }; export default VideoList; |