$(document).ready(function() {
  var key = "AIzaSyBjAO9IdYQQadKxuH0PVsFEOLamg2Xg4E8";
  var playListId = "PL9fZSoTrgsAv0IidBcirCXq5uth_3pqNJ";
  var URL = "https://www.googleapis.com/youtube/v3/playlistItems";

  var options = {
    part: "snippet",
    key: key,
    maxResults: 60,
    playlistId: playListId
  };

  function loadVids() {
    $.getJSON(URL, options, function(data) {
      console.log(data);
      let id = data.items[0].snippet.resourceId.videoId;
      mainVideo(id);
      resultsLoop(data);
    });
  }
  loadVids();
  function mainVideo(id) {
    $("#video").html(`
     <iframe width="560" height="315" src="https://www.youtube.com/embed/${id}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
`);
  }

  function resultsLoop(data) {
    $.each(data.items, function(i, item) {
      const thumb = item.snippet.thumbnails.medium.url;
      const title = item.snippet.title;
      const desciption = item.snippet.description.substring(0, 100);
      const vid = item.snippet.resourceId.videoId;

      $("main").append(`
        <article data-key="${vid}">
      <img src="${thumb}" alt="" class="thumb">
      <div class="details">
        <h1>${title}</h1>
        <p>${desciption}</p>
      </div>
    </article>
`);
    });
  }
  $("main").on("click", "article", function() {
    var id = $(this).attr("data-key");
    mainVideo(id);
  });
});