Youtube API v3 - Select menu to access public channel video data without Oauth

Question

FINAL UPDATE

A few updates later and I've finally answered my question after playing with the awesome Google APIs Explorer tool. Here is a sample working code allowing access to Youtube channel video-related data from a Select menu for read-only without using OAUTH, just an API key. The Select menu, based on a selected option's value (which contains a channel id), posts a video thumbnail, the thumbnail's channel origin; and the video's title. Should be easy to make the thumbnail clickable so as to load video in iframe embed or redirect to Youtube page. Enjoy!

// Change values and titles accordingly
<select id="SELECTmenu">
<option value="selchan">Select channel ...</option>
<option value="-YOUR-24digit-ChannelID-">Put-channel-title-here</option>
<option value="-YOUR-24digit-ChannelID-">Put-channel-title-here</option>
</select>

<button id="NEXTbutton">NEXT</button>
<button id="PREVIOUSbutton">PREV</button>

<ol id="CONTAINER"></ol> // Loads video data response

<script type="text/javascript"
src="https://apis.google.com/js/client.js?onload=onJSClientLoad">
</script>

var playlistId, nextPageToken, prevPageToken;

function onJSClientLoad() {
  gapi.client.setApiKey('INSERT-YOUR-API-KEY'); // Insert your API key
  gapi.client.load('youtube', 'v3', function(){
    //Add function here if some action required immediately after the API loads
  });
}


function requestUserUploadsPlaylistId(pageToken) {
  // https://developers.google.com/youtube/v3/docs/channels/list
  var selchan = $("#SELECTmenu option:selected").val();
  var request = gapi.client.youtube.channels.list({
    id: selchan,
    part: 'snippet,contentDetails',
    filter: 'uploads'
  });
  request.execute(function(response) {
    playlistId = response.result.items[0].contentDetails.relatedPlaylists.uploads;
    channelId = response.result.items[0].id;
    requestVideoPlaylist(playlistId, pageToken);
  });
}

function requestVideoPlaylist(playlistId, pageToken) {
  $('#CONTAINER').empty();
  var requestOptions = {
    playlistId: playlistId,
    part: 'snippet,id',
    maxResults: 5 // can be changed
  };
  if (pageToken) {
    requestOptions.pageToken = pageToken;
  }
  var request = gapi.client.youtube.playlistItems.list(requestOptions);
  request.execute(function(response) {

    // Only show the page buttons if there's a next or previous page.
    nextPageToken = response.result.nextPageToken;
    var nextVis = nextPageToken ? 'visible' : 'hidden';
    $('#NEXTbutton').css('visibility', nextVis);
    prevPageToken = response.result.prevPageToken
    var prevVis = prevPageToken ? 'visible' : 'hidden';
    $('#PREVIOUSbutton').css('visibility', prevVis);

    var playlistItems = response.result.items;
    if (playlistItems) {
      displayResult(playlistItems);
    } else {
      $('#CONTAINER').html('Sorry, no uploaded videos.');
    }
  });
}

function displayResult(playlistItems) {
  for(var i=0;i<playlistItems.length;i++) {
    var channelTitle = playlistItems[i].snippet.channelTitle
    var videoTitle = playlistItems[i].snippet.title;
    var videoThumbnail = playlistItems[i].snippet.thumbnails.medium.url;

    var results = '<li>
    <div>'+channelTitle+'</div>
    <div><img src="'+videoThumbnail+'" /></div>
    <div>'+videoTitle+'</div>
    </li>'; 

    $('#CONTAINER').append(results);
  }
}

function nextPage() {
  $('#CONTAINER').empty(); // This needed here
  requestVideoPlaylist(playlistId, nextPageToken);
}

function previousPage() {
  $('#CONTAINER').empty(); // This needed here
  requestVideoPlaylist(playlistId, prevPageToken);
}

$('#NEXTbutton').on('click', function() { // Display next maxResults
  nextPage();
});

$('#PREVIOUSbutton').on('click', function() { // Display previous maxResults
  previousPage();
});

// Using as filtering example Select option values which contain channel
// ID length of 24 alphanumerics/symbols to trigger functions just in case
// there are other option values in the menu that do not refer to channel IDs.

$("#SELECTmenu").on("change", function() {
  $('#CONTAINER').empty();
  if ($("#SELECTmenu option:selected").val().length === 24) {
    requestUserUploadsPlaylistId();
    return false;
  } else {
    return false;
  }
});

NOTE:

Remember, code sample above is built based on what API v3 provided at the time of this posting.

TIP: It's better to make sure that the buttons be disabled during API call and re-enabled after API has posted the expected results. If you press those buttons while processing, you may get compounded and/or unexpected results. ~ Koolness