It is working fine for me. You can refer this answer for showing youtube channel videos into the website:
$(document).ready(function () {
youtubeApiCall();
$("#pageTokenNext").on("click", function (event) {
event.stopImmediatePropagation();
$("#pageToken").val($("#pageTokenNext").val());
youtubeApiCall();
});
$("#pageTokenPrev").on("click", function (event) {
event.stopImmediatePropagation();
$("#pageToken").val($("#pageTokenPrev").val());
youtubeApiCall();
});
});
// Get Uploads Playlist
function youtubeApiCall() {
$.get(
"https://www.googleapis.com/youtube/v3/channels", {
part: 'contentDetails',
forUsername: 'bharatpillai007',
//id: {YOUTUBE CHANNEL ID}, //or you can call forUsername: {USER NAME} parameter of the your youtube channel
key: 'AIzaSyCKCyYrVLEKR7VR4BFlrC5AhhzYQGRIet4'
}, function (data) {
$.each(data.items, function (i, item) {
pid = item.contentDetails.relatedPlaylists.uploads;
getVids(pid);
});
}
);
}
//Get Videos
function getVids(pid) {
$.get(
"https://www.googleapis.com/youtube/v3/playlistItems", {
part: 'snippet',
maxResults: 10, // Defualt 5. You can set 1 to 50
playlistId: pid,
key: 'AIzaSyCKCyYrVLEKR7VR4BFlrC5AhhzYQGRIet4',
pageToken: $("#pageToken").val()
}, function (data) {
var results;
$.each(data.items, function (i, item) {
if (typeof data.prevPageToken === "undefined") {
$("#pageTokenPrev").hide();
} else {
$("#pageTokenPrev").show();
}
if (typeof data.nextPageToken === "undefined") {
$("#pageTokenNext").hide();
} else {
$("#pageTokenNext").show();
}
$("#pageTokenNext").val(data.nextPageToken);
$("#pageTokenPrev").val(data.prevPageToken);
results = '<li>' + item.snippet.title + '</li>';
$('#results').append(results);
});
}
);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row-fluid">
<ul id="results"></ul>
<input type="hidden" id="pageToken" value="" />
<div class="btn-group" role="group" aria-label="...">
<button type="button" id="pageTokenPrev" value="" class="btn btn-default">Prev</button>
<button type="button" id="pageTokenNext" value="" class="btn btn-default">Next</button>
</div>
</div>
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…