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.

Youtube search API request in javascript and html example.

// Your use of the YouTube API must comply with the Terms of Service:
// 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() {

// 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 ={
        part: 'snippet',
    // Send the request to the API server, call the onSearchResponse function when the data is returned
// Triggered by this line: request.execute(onSearchResponse);
function onSearchResponse(response) {
    var responseString = JSON.stringify(response, '', 2);
   	document.getElementById('response').innerHTML = responseString;


<!DOCTYPE html>
        <script src="search.js" type="text/javascript"></script>        
        <script src="" type="text/javascript"></script>
      	<input id="query" value='cats' type="text"/>
      	<button onclick="search()">Search</button>
        <pre id="response"></pre>

Search within Codexpedia

Custom Search

Search the entire web

Custom Search