Trouble using Youtube API feature

[mattboston]

I am attempting to create my own ‘youtube app’ like shown in this video - Code your own YouTube app: YouTube API + HTML + CSS + JavaScript (full tutorial) - YouTube

I have completed writing the code and I’m not getting any of the videos to display. I have went back and read thru the code and everything matches up with the video and I have even included my own API key id.

Could anyone guide me to how to get the video playlist to actually be visible to the page. The playlist link is -

[kevinSmith]

It would be helpful to see your code. Do you have a repo?

[mattboston]

Youtubes

sorry thought that was up there

[kevinSmith]

Well, the first thing that I notice is one of your network calls is failing:

1. Request URL:
   https://www.googleapis.com/youtube/v3/playlists?part=snippet&key=AIzaSyDx_QAX5gsZwPP-_kxmVdG7VnIPeUXZ1Qk&maxResults=20&playlistId=PL-vfMvq9s6UeRzMqK_tZcx6s9Tb9eCu8L

2. Request Method:
   GET

3. Status Code:
   400

The “400” hundred means that it is failing, probably something you did/didn’t do.

The response is:

{
  "error": {
    "code": 400,
    "message": "No filter selected. Expected one of: mine, channelId, id",
    "errors": [
      {
        "message": "No filter selected. Expected one of: mine, channelId, id",
        "domain": "youtube.parameter",
        "reason": "missingRequiredParameter",
        "location": "parameters.",
        "locationType": "other"
      }
    ]
  }
}

Do you know how to use the browser dev tools? They are one of the most important tools you have. Look into it. I use the console. network, and inspect tool all the time.

You can also get the response in the console by handling the API fail in the code, something like:

  function loadVids() {
    $.getJSON(URL, options, function (data) {
      var id = data.items[0].snippet.resourceID.videoID;
      mainVid(id);
      resultsLoop(data);      
    })
    .catch(err => console.error('Request failed:', err.responseText)) 
  }