Example YouTube JSON File
This article series was rewritten in mid 2017 with up-to-date information and fresh examples.
YouTube is an online video sharing service, created by former employees of PayPal in 2005. Today, it operates as a subsidiary of Google and it currently stands as the second most popular website globally according to Alexa.
In this example, I’ll show you how to use the YouTube Data API. The API allows you to integrate YouTube functionality to a website. It also gives developers access to a search.list
method that supports searching of videos, playlists, and channels. The API has multiple client libraries targeting different platforms which include Android, Go, Java, JavaScript, NodeJS, .NET, PHP, Python, and Ruby.
Let’s see how to perform a simple search using JavaScript in four steps:
-
Clone the project as outlined on the intro page, if you haven’t already done so.
-
Install the http-server package in your machine globally.
$ npm i -g http-server
-
Acquire your YouTube API key using this link. Once you have acquired that, open the
src/youtube-example.html
file and replaceundefined
with your api key.HTML/JS code:
<!DOCTYPE html> <html> <head> <title>YouTube JSON Example</title> <script type="text/javascript"> const api = undefined; // Specify your api key here // Load API library function onLoad() { if(api) { gapi.client.load('youtube', 'v3', loadYouTubeApi); } else { document.getElementById('output').innerHTML += 'API key has not been specified!'; } } // Set API Key function loadYouTubeApi() { gapi.client.setApiKey(api); search('sitepoint'); } // Call the search.list() function search(queryTerm) { let request = gapi.client.youtube.search.list({ part: 'id', q: queryTerm }); // Execute the request call and output it in HTML view request.execute((response) => { const responseString = JSON.stringify(response, '', 2); document.getElementById('output').innerHTML += responseString; }) } </script> <script src="https://apis.google.com/js/client.js?onload=onLoad" type="text/javascript"></script> </head> <body> <h1>YouTube Search Results</h1> <pre id="output"></pre> </body> </html>
-
To run the html code, you’ll need to load it via a server. Opening it directly with your browser won’t work. Navigate to the
src
folder and start thehttp-server
we just installed.$ http-server Starting up http-server, serving ./ Available on: http://127.0.0.1:8080 http://10.0.2.15:8080
Once the server is up and running, you can open your browser and access the page using the URL: http://127.0.0.1:8080/youtube-example.html. After a few seconds, the page will be populated with some JSON data that looks like this:
YouTube API JSON Response (partial results):
{
"kind": "youtube#searchListResponse",
"etag": "\"m2yskBQFythfE4irbTIeOgYYfBU/PaiEDiVxOyCWelLPuuwa9LKz3Gk\"",
"nextPageToken": "CAUQAA",
"regionCode": "KE",
"pageInfo": {
"totalResults": 4249,
"resultsPerPage": 5
},
"items": [
{
"kind": "youtube#searchResult",
"etag": "\"m2yskBQFythfE4irbTIeOgYYfBU/QpOIr3QKlV5EUlzfFcVvDiJT0hw\"",
"id": {
"kind": "youtube#channel",
"channelId": "UCJowOS1R0FnhipXVqEnYU1A"
}
},
{
"kind": "youtube#searchResult",
"etag": "\"m2yskBQFythfE4irbTIeOgYYfBU/AWutzVOt_5p1iLVifyBdfoSTf9E\"",
"id": {
"kind": "youtube#video",
"videoId": "Eqa2nAAhHN0"
}
},
{
"kind": "youtube#searchResult",
"etag": "\"m2yskBQFythfE4irbTIeOgYYfBU/2dIR9BTfr7QphpBuY3hPU-h5u-4\"",
"id": {
"kind": "youtube#video",
"videoId": "IirngItQuVs"
}
}
]
}
Here are the other examples in this series: