Exercise: Youtube JS API



In this exercise, you'll try to bring in Youtube video information using their JSON API. Go through these steps, and do as many as you can in the time we have:

  1. Start with this file or start with your own solution from the last exercise. Open it up and make sure it's working as expected.
  2. Go to the Search:list reference in the Youtube API docs and read through it, especially the Request/Parameters section. Search for whatever videos you fancy, but limit the search to 5 results. Copy the address from the "HTTP request" box, use the API key AIzaSyCRXTR0G_Slvgyjj_Vgfry6KLiw8pIMlHs, and test it in the browser.
  3. The webpage currently brings in video information using the jQuery $.ajax function to bring in a local videos.json file into the page. Change that function so that it instead brings in the results of a Youtube API search from the Youtube servers and displays those results instead.
    Tips: Remember that the JSON returned by the Youtube API will differ from the JSON format of videos.json. You should console.log inside your callback to see what the data looks like and make sure you're using it correctly. In particular, note that the video objects are stored in a container object called "items", and check how they store the ID, title, and author. (Rating is not available.)
  4. Bonus: Add a search button to the page so that people can search for any query.

Make sure that you use your browser developer tools to make debugging easier while working on this. Check for errors, and use console.log() to figure out how far your code makes it, and what the values of your variables are along the way.