I'm trying to add a youtube playlist to my website using a tutorial/code. I'm not sure what to do if the there are more than 50 results. I checked the youtube/google api documentation and got a nextPageToken but I'm not sure what to do with it. How do I add pageToken/nextPageToken/prevPageToken objects (?) to the options variable so that it will update the playlist when I click a button? I want to add pagination to the results without reloading the page.
Here is the code from the tutorial. It works as is but I can't view more than 50 videos (the playlist I'm using has about 120). When I add pageToken: nextPageToken to the options, it says that nextPageToken is not defined. How do I define it and the previousPageToken and use them to update the pageToken object and change the results on the page?
$(document).ready(function () { var key = [YOUR API KEY HERE]; var playlistId = 'PL2fnLUTsNyq7A335zB_RpOzu7hEUcSJbB'; var URL = 'https://www.googleapis.com/youtube/v3/playlistItems'; var options = { part: 'snippet', key: key, maxResults: 50, playlistId: playlistId } loadVids(); function loadVids() { $.getJSON(URL, options, function (data) { var id = data.items[0].snippet.resourceId.videoId; mainVid(id); resultsLoop(data); }); } function mainVid(id) { $('#video').html(`<iframe width="560" height="315" src="https://www.youtube.com/embed/${id}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> `); } function resultsLoop(data) { $.each(data.items, function (i, item) { var thumb = item.snippet.thumbnails.medium.url; var title = item.snippet.title; var desc = item.snippet.description.substring(0, 100); var vid = item.snippet.resourceId.videoId; $('main').append(`<article class="item" data-key="${vid}"><img src="${thumb}" alt="" class="thumb"><div class="details"><h4>${title}</h4><p>${desc}</p></div></article> `); }); } // CLICK EVENT $('main').on('click', 'article', function () { var id = $(this).attr('data-key'); mainVid(id); });});