how do you get the fourth item in the YouTube API version3`

Hi,

I am working with the YouTube API and I want to be able to display the thumbnails and title for the first three results then for the rest just display the title.

Since version 3 doesn't have a start-index I don't know how to do it.

Maybe use Jquery to loop the first three and display the thumbnail and title then use another loop that starts on the fourth item and display just the  title?

Here is what I have so far.

Thanks,

 <script type="text/javascript">
      pid = '';
      $(document).ready(function(){
        $.get(
          "https://www.googleapis.com/youtube/v3/channels", {
            part: 'contentDetails',
            forUsername: 'mcdonalds',
            key: 'AIzaSyB7oqNYxEGnskHEpKHSCbIH_-VI4_sJkzg'
          },
        function(data){
          $.each(data.items, function(i, item)  {
          
            console.log(item);
            pid = item.contentDetails.relatedPlaylists.uploads;
            getVids(pid);
          })
        });

      });
      function getVids(pid, pageToken){
        var data = {
          part: 'snippet',
          maxResults: 50,
          playlistId: pid,
          key: 'AIzaSyB7oqNYxEGnskHEpKHSCbIH_-VI4_sJkzg'
        }
        
       
        
        try{
          if(pageToken){
            data["pageToken"] = pageToken;
          }
        }catch(err){
        }

        $.get(
          "https://www.googleapis.com/youtube/v3/playlistItems", data, function(data){
            var output;

            $('#results').html("");
            $.each(data.items, function(i, item){
              console.log(item);
              videoTitle = item.snippet.title;
              rvideoID = item.snippet.resourceId.videoId;
              vidThumburl = item.snippet.thumbnails.high.url;
              output = '<li style="list-style:none;"><a class="videos2 video" href="https://www.youtube.com/watch?v=' + rvideoID + '">' + videoTitle + '<a/></li>';
              //Append to results list
              $('#results').append(output);
            });

            try{
              if(data.prevPageToken){
                $("#container").append('<li style="list-style:none;"><a href="javascript:void(0);" onclick="javascript:getVids(pid, \'' + data.prevPageToken + '\');">&raquo; Prev Page<a/></li>');
              }
            }catch(err){
            }

            try{
              if(data.nextPageToken){
                $("#container").append('<li style="list-style:none;"><a href="javascript:void(0);" onclick="javascript:getVids(pid, \'' + data.nextPageToken + '\');">Next Page &laquo;<a/></li>');
              }
            }catch(err){
            }
          });
      }
    </script>




<ul id="results" class="videos2" style="width:300px;"></ul>

<div id="container">
</div>

Select allOpen in new window