Youtube search API example with javascript and html

Youtube search API GET request example, replace put_your_api_key_here with your youtube API that you created from your google developer console, and then paste the link in a browser, you should get a json response back.

https://www.googleapis.com/youtube/v3/search?part=snippet&q=php&key=put_your_api_key_here

Youtube search API request in javascript and html example.
search.js

// Your use of the YouTube API must comply with the Terms of Service:
// https://developers.google.com/youtube/terms
// Called automatically when JavaScript client library is loaded.
function onClientLoad() {
    gapi.client.load('youtube', 'v3', onYouTubeApiLoad);
}
// Called automatically when YouTube API interface is loaded (see line 9).
function onYouTubeApiLoad() {
    gapi.client.setApiKey('replace_with_your_youtube_api_key');
}

// Called when the search button is clicked in the html code
function search() {
	var query = document.getElementById('query').value;
    // Use the JavaScript client library to create a search.list() API call.
    var request = gapi.client.youtube.search.list({
        part: 'snippet',
        q:query
    });
    // Send the request to the API server, call the onSearchResponse function when the data is returned
    request.execute(onSearchResponse);
}
// Triggered by this line: request.execute(onSearchResponse);
function onSearchResponse(response) {
    var responseString = JSON.stringify(response, '', 2);
   	document.getElementById('response').innerHTML = responseString;
}

search.html

<!DOCTYPE html>
<html>
    <head>
        <script src="search.js" type="text/javascript"></script>        
        <script src="https://apis.google.com/js/client.js?onload=onClientLoad" type="text/javascript"></script>
        
    </head>
    <body>
      	<input id="query" value='cats' type="text"/>
      	<button onclick="search()">Search</button>
        <pre id="response"></pre>
    </body>
</html>

Search within Codexpedia

Custom Search

Search the entire web

Custom Search