Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

React.js Youtube Data API V3 Video Search Example Using Axios Full Tutorial For Beginners

Posted on January 20, 2023

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

 

 

JavaScript
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

 

 

JavaScript
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

 

 

JavaScript
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

 

 

JavaScript
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

 

 

JavaScript
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

 

 

JavaScript
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;

 

 

 

 

Recent Posts

  • Android Java Project to Build MP4 Video to MP3 Audio Converter Using MediaMuxer Class
  • Android Java Project to Merge Multiple PDF Documents From Gallery Using iTextPDF Library
  • Android Java Project to Detect System Hardware & System CPU Info & Display inside TextView Widget
  • Android Java Project to Integrate Google OAuth2 Login & Logout System & Save User Info in SharedPreferences
  • Android Java Project to Export Raw Text to PDF Document Using iTextPDF Library
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme