Playlist Items Returning "Undefined"? JQuery/YouTube API v3

Question

I am trying to figure out the source cause of this issue. I have a function which grabs the most recent videos added to a youtube playlist, but I can't seem to link the videos within that playlist to direct to their corresponding video URLs. Pretty stumped. What am I doing wrong?

UPDATE/SOLUTION:

I have updated the snippet with the solution provided here. Replaced videoID = item['id']['videoId']; with videoID = item['snippet']['resourceId']['videoId'];.

var htmlString = "";
var apiKey = 'AIzaSyDI4rWo_wVAxRZEIgF6_8sRZDj8OCOZZ38';
var playlistID = 'PLBhKKjnUR0XBVrHvtDOylN5XREHh9X1nt';
var maxResults = 10;

$.getJSON('https://www.googleapis.com/youtube/v3/playlistItems?key=' + apiKey + '&playlistId=' + playlistID + '&part=snippet&maxResults=' + (maxResults > 50 ? 50 : maxResults), function(data) {
  $.each(data.items, function(i, item) {
    var videoID = item['snippet']['resourceId']['videoId'];
    var title = item['snippet']['title'];
    var videoURL = 'https://www.youtube.com/watch?v=' + videoID + '&list=' + playlistID + '&index=1';
    htmlString += '<div class="video">' + title + '<br><a target="_blank" href="' + videoURL + '"><img src="https://i.ytimg.com/vi/' + videoID + '/default.jpg"></a></div>';
  });
  $('#youtube-playlist-feed').html(htmlString);
});

body {
  margin: 0;
  padding: 0;
}

.video {
  float: left;
  max-width: 30%;
  margin: 5px;
  font-size: 20px;
  font-weight: bold;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.video img {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="youtube-playlist-feed"></div>

Answer 1

You're setting the wrong videoId.

It should be:

var videoID = item['snippet']['resourceId']['videoId'];