Youtube_clone/index.js at main · rishitmayank/Youtube_clone · GitHub

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
// (1) Show/Display Videos on Homepage
let div = document.getElementById("videodiv");
async function display() {
  // q = Popular Videos --> Popular%20Videos (%20 -> Space)
  let res = await fetch(
    `https://youtube.googleapis.com/youtube/v3/search?q=popular%20videos&key=AIzaSyA00OxUbfdfVAjHn-9l48s0t-n_j7CBbNs&maxResults=25`
  );
  let data = await res.json();
  for ({
    id: { videoId },
  } of data.items) {
    let videodiv = document.createElement("iframe");
    videodiv.setAttribute("class", "mons");
    videodiv.src = `https://www.youtube.com/embed/${videoId}`;
    videodiv.allow = "fullscreen";
    div.append(videodiv);
  }
}

display();

// (2) Search When Something is typed in the search-box
async function searchVideos() {
  document.getElementById("videodiv").innerHTML = ""; // Empty

  let query = document.getElementById("video").value; // Search String/ Query String
  //search for videos
  let res = await fetch(
    `https://youtube.googleapis.com/youtube/v3/search?q=${query}&type=video&key=AIzaSyA00OxUbfdfVAjHn-9l48s0t-n_j7CBbNs&maxResults=25`
  );
  let data = await res.json();

  for ({ id: videoId } of data.items) {
    let videodiv = document.createElement("iframe");
    videodiv.setAttribute("class", "mons");
    videodiv.src = `https://www.youtube.com/embed/${videoId}`;
    videodiv.allow = "fullscreen";
    div.append(videodiv);
  }
}