public/assets/js/yt-list-videos.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

let channelID = 'UCNRn4YDPCCWSEl3CT7eWorA';
let apiKey = "nope"; // Note to self: Rewrite the authentication part
let vidHeight = 400;
let vidWidth = 500;
let vidMaxResult = 5;

$(document).ready(function () {
    $.get("https://www.googleapis.com/youtube/v3/channels", {
            part: 'contentDetails',
            id: channelID,
            key: apiKey //Browser API Key
        },
        function (data) {
            $.each(data.items, function (i, item) {
                console.log(item); // See in Browser Console
                pid = item.contentDetails.relatedPlaylists.uploads;
                getVideos(pid);
            })
        }
    );
    function getVideos(pid)
    {
        $.get("https://www.googleapis.com/youtube/v3/playlistItems", {
                part: 'snippet',
                maxResults: vidMaxResult,
                playlistId: pid,
                key: apiKey //Browser API Key
            },
            function (data) {
                let outputVideo;
                $.each(data.items, function (i, item) {
                    console.log(item); // See in Browser Console
                    vidId = item.snippet.resourceId.videoId;
                    outputVideo = '<li class="yt-vid-list"><iframe height="' + vidHeight + '" width="' + vidWidth + '" src=\"//www.youtube.com/embed/' + vidId + '"> </iframe></li>';

                    //Append to result list
                    $('#yt-results').append(outputVideo);
                })
            }
        );
    }
});