🤯 50% Off! 700+ courses, assessments, and books
Browse Titles
JavaScript

Example YouTube JSON File

Michael Wanyoike
Share

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:

  1. Clone the project as outlined on the intro page, if you haven’t already done so.

  2. Install the http-server package in your machine globally.

    $ npm i -g http-server

  3. Acquire your YouTube API key using this link. Once you have acquired that, open the src/youtube-example.html file and replace undefined 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>

  4. 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 the http-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: