Build a Advanced Video Search Web App Using Youtube Data API V3 in Javascript

Welcome folks today in this blog post we will be building an advanced video search app using youtube data api v3 in javascript. All the full source code of the application is shown below.

Get Started

In order to get started you need to make an index.html file and copy paste the following code

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript Youtube Video Search App</title>
</head>

<body>
    <div class="container">
        <h1 class="text-center mt-5">
            Youtube Video Search Using Data API V3
        </h1>
        <form>
            <div class="form-group">
                <input type="text" class="form-control" name="" id="search">
            </div>
            <div class="form-group">
                <input type="submit" class="btn btn-danger" value="Search Videos">
            </div>
        </form>
        <div class="row">
            <div class="col-md-12">
                <div id="videos">

                </div>
            </div>
        </div>
    </div>
</body>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</html>

<!DOCTYPE html>

<head>

<title>Javascript Youtube Video Search App</title>

</head>

<body>

Youtube Video Search Using Data API V3

</h1>

<form>

</div>

</div>

</form>

</div>

</body>

</html>

As you can see in the above code we are including the cdn library of the bootstrap and the jquery library. And then we are defining the html5 form where we have the option field to enter the search text where we will be searching youtube videos. And then we have the button to search the youtube videos. And then we have the section to display the list of youtube videos.

And now we will be writing the javascript code to fetch the data from the youtube data api v3 and display the youtube videos as shown below

$(document).ready(function(){
    let apiKey = "##yourapikey##"

    $("form").submit((e) => {
        e.preventDefault()
        let search = $("#search").val()
        videoSearch(apiKey,search,10)
    })
})

function videoSearch(apiKey,search,maxResults){
    $.get("https://www.googleapis.com/youtube/v3/search?key=" + apiKey + "&type=video&part=snippet&maxResults=" + maxResults + "&q=" + search,(data) => {
        console.log(data)
    })

}

$(document).ready(function(){

let apiKey = "##yourapikey##"

$("form").submit((e) => {

e.preventDefault()

let search = $("#search").val()

videoSearch(apiKey,search,10)

})

function videoSearch(apiKey,search,maxResults){

$.get("https://www.googleapis.com/youtube/v3/search?key=" + apiKey + "&type=video&part=snippet&maxResults=" + maxResults + "&q=" + search,(data) => {

console.log(data)

})

}

As you can see in the above code we are declaring the api key from the google developer console. And there you need to enable the youtube data api v3 and then grab your own api key. And replace in the above code and then we are attaching the form event listener when we submit the form and then we are getting the searched value from the user and then we are calling the videoSearch() function and there we are passing the three arguments which is the apikey and then we are passing the searched value and then we are passing the amount of videos that we need to display which is 10. And when we define this function we are getting the three arguments. And here we are using the $.get() method we are passing the url of the youtube data api v3 and then we are getting the data inside the console.

Now we can embed the youtube videos in the iframe which will have fixed width and height and we will have all the controls. And for this we will be using the foreach loop to iterate all the videos which is present inside the array response coming from the youtube data api.

let video = ''

        data.items.forEach(item => {
            video = `
            <iframe width="420" height="315" src="http://www.youtube.com/embed/${item.id.videoId}" frameborder="0" allowfullscreen></iframe>
            `

            $("#videos").append(video)
        });

let video = ''

data.items.forEach(item => {

video = `

$("#videos").append(video)

});

As you can see we are attaching the src property to the iframe and here we are simply embedding the youtube video using it’s id. And then we are using the append() method to simply embed the videos inside the browser. So now if you open the application inside the browser you will see the below videos

Wrapping the blog post this is the full javascript code as shown below

<script>
$(document).ready(function(){
    let apiKey = "##yourapikey##"

    $("form").submit((e) => {
        e.preventDefault()
        let search = $("#search").val()
        videoSearch(apiKey,search,10)
    })
})

function videoSearch(apiKey,search,maxResults){
    $.get("https://www.googleapis.com/youtube/v3/search?key=" + apiKey + "&type=video&part=snippet&maxResults=" + maxResults + "&q=" + search,(data) => {
        console.log(data)

        let video = ''

        data.items.forEach(item => {
            video = `
            <iframe width="420" height="315" src="http://www.youtube.com/embed/${item.id.videoId}" frameborder="0" allowfullscreen></iframe>
            `

            $("#videos").append(video)
        });
    })

}
</script>

$(document).ready(function(){

let apiKey = "##yourapikey##"

$("form").submit((e) => {

e.preventDefault()

let search = $("#search").val()

videoSearch(apiKey,search,10)

})

function videoSearch(apiKey,search,maxResults){

$.get("https://www.googleapis.com/youtube/v3/search?key=" + apiKey + "&type=video&part=snippet&maxResults=" + maxResults + "&q=" + search,(data) => {

console.log(data)

let video = ''

data.items.forEach(item => {

video = `

$("#videos").append(video)

});

})

}

</script>