This repository has been archived by the owner on Nov 20, 2022. It is now read-only.
/
app.js
71 lines (60 loc) · 2.1 KB
/
app.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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
$(document).ready(function () {
var key = ""; //enter your own API key here
var playlistId = "PLvYbWbiZnQ0cl_ZrEEtmwll3wBKkOeS-T";
var URL = "https://www.googleapis.com/youtube/v3/playlistItems";
var options = {
part: "snippet",
key: key,
maxResults: 20,
playlistId: playlistId
};
function loadVids() {
$.getJSON(URL, options, function (data) {
console.log(data);
var id = data.items[0].snippet.resourceId.videoId;
mainVid(id);
resultsLoop(data);
});
}
loadVids();
function mainVid(id) {
$("#youtube_video_feed").html(`
<iframe width="860" height="480" src="https://www.youtube.com/embed/${id}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
`);
}
function resultsLoop(data) {
$.each(data.items, function (i, item) {
/*set up the thumbnail of each playlist item*/
var thumb = item.snippet.thumbnails.medium.url;
/*set up playlist item title*/
var title = item.snippet.title;
/*set up description of playlist item*/
var description = item.snippet.description.substring(0, 100);
/*get the video ID of each playlist item*/
var vid = item.snippet.resourceId.videoId;
/*dynamically grab each playlist items*/
$("#youtube_playlist").append(`
<article class="playlist-item" data-key="${vid}">
<img src="${thumb}" alt="" class="thumb">
<div class="youtubevideo_description">
<h4>${title}</h4>
<p id="youtube_description_p">${description}</p>
</div>
</article>
`);
});
}
$("#youtube_playlist").on("click", "article", function () {
var id = $(this).attr("data-key");
mainVid(id);
});
});
/*twitch.tv embed functions*/
new Twitch.Embed("twitch-embed", {
width: 1800,
height: 800,
channel: "trick2g",
layout: "video-with-chat",
autoplay: false,
theme: "dark"
});