Pagination of Youtube Playlist

Question

I have a page named banking.html which displays all the videos from a particular playlist of my YouTube channel. I know that we have to apply pagination to display more than 50 videos but I am not sure how can I do this? If anyone can help me achieving this, I would highly appreciate. Here is my code:

banking.html:

<div class="category-section">
                <div class="header">
                    <h1>Banking</h1><span>Latest Upload</span>                        
                </div>
                <div class="content">
                    <ul id="youtube-playlist-feed_1" class="thumbnail-section">
                    </ul>
                    <div id="nextPage"></div>
                    <div id="prevPage"></div>
                </div>
            </div>

banking.js:

                var htmlString = "";
            var apiKey = 'AIzaSyA7dAzzNvPCxTSsSGiV7dvoj3rkt0qbdXg';
            var playlistID = 'PLBhKKjnUR0XBVrHvtDOylN5XREHh9X1nt';
            var maxResults = 50;

            var playlists = [{
                playlistId: 'PLJYHm_ZxWCKnQmapkDs7x47jkr-nw3l50',
                el: '#youtube-playlist-feed_1'
              },
              {
                playlistId: 'PLJYHm_ZxWCKmIBkoopKFK4kTTOmC1Zof0',
                el: '#youtube-playlist-feed_2'
              },
              {
                playlistId: 'PLBhKKjnUR0XAM2Wvi7JY5gLRpFLzIE-An',
                el: '#youtube-playlist-feed_3'
              }
            ];

            playlists.forEach(function(playlist) {
              getVideoFeedByPlaylistId(playlist.playlistId, playlist.el);
            })

            function getVideoFeedByPlaylistId(playlistId, el) {
              $.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 pub = item['snippet']['publishedAt'];
                  var nextPage = item['snippet']['nextPageToken'];
                  var videoURL = 'https://www.youtube.com/watch?v=' + videoID + '&list=' + playlistID + '&index=1';
                  htmlString += '<div class="video-wrap"><div class="video"><a target="_blank" href="player.html?vid='+videoID+'" ><img src="https://i.ytimg.com/vi/' + videoID + '/mqdefault.jpg"></a></div>' + '<div class="title"><a target="_blank" id="player" href="player.html?vid='+videoID+'">' + title + '</a></div></div>';

                });
                $(el).html(htmlString);

                htmlString = '';
              });
            }

Answer 1

You can control the maximum number of resources the server returns in the response to a list request by setting the maxResults field. If the total number of items exceeds this maximum, the server returns one page of results.

Remember that maxResults does not guarantee the number of results on one page. Incomplete results can be detected by a non-empty nextPageToken field in the result. In order to retrieve the next page, perform the exact same request as previously and append a pageToken field with the value of nextPageToken from the previous page. A new nextPageToken is provided on the following pages until all the results are retrieved.

For example, here is a query followed by the query for retrieving the next page of results in a paginated list:

https://www.googleapis.com/youtube/v3/playlists?pageToken=[nextPageTokenFrom previous request]

Tips to fix your code

As shown above you will need to add the next page token to the request you are looping though. You are already testing on maxresult you could make a test that checks if nextpage exists then you add it if not you stop. I do not claim to be a Javascript dev but it should be close to this.

    $.getJSON('https://www.googleapis.com/youtube/v3/playlistItems?key=' + apiKey + '&playlistId=' + playlistId + '&part=snippet&maxResults=' + (maxResults > 50 ? 50 : maxResults + (nextPage != null ? 'pageToken=' + [nextPageTokenFrom previous request] : ''
), function(data) {

Answer 2

Here's another version of the solution in php. It can be altered to match your use-case and others.

It calls the API for titles in a specific playlist, paginating iteratively. It uses the nextPageToken value from the previous API call JSON response to populate the "pageToken" parameter in a new call. Use maxResults to cover all items in the playlist.

I'm using this to log a clean list of titles in a playlist.

<?php 
$playlistId = 'Enter_Your_Playlist_Id_here';
$access_token = 'Enter_Your_Token_Id_here';
$url = 'https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&playlistId='.$playlistId.'&key='.$access_token.'&maxResults=50';
$response = json_decode(file_get_contents($url));
foreach($response->items as $playlist){
$title = $playlist->snippet->title;
?>
<div class="row">
<div class="col-md-2">
<p><?php echo $title;?></p>
</div>
</div>
<?php } ?>

<?php 
$playlistId = 'Enter_Your_Playlist_Id_here';
$access_token = 'Enter_Your_Access_Token_here';
$url = 'https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&playlistId='.$playlistId.'&key='.$access_token.'&pageToken=Enter_the_nextPageToken_value_from_previous_API_Call_Here&maxResults=50';
$response = json_decode(file_get_contents($url));
foreach($response->items as $playlist){
$title = $playlist->snippet->title;
?>
<div class="row">
<div class="col-md-2">
<p><?php echo $title;?></p>
</div>
</div>
<?php } ?>