title: YouTube Playlist inside a Page with x-amount of videos
body: <p>I want to display a YouTube Playlist, where i have the main/current selected video in the top and x-amount of videos of that playlist underneath it.</p>
  <p>Sadly it seems to stop inside the function loadVids right before $.getJSON, but i cant seem to find the error here.</p>
  <p>(I had a typo at options being opions, but that isn't the problem here)</p>
  <p>HTML:</p>
  <pre><code>&lt;div class=&quot;vidcontainer&quot;&gt;
      &lt;section id=&quot;video&quot;&gt;&lt;/section&gt;
      &lt;main class=&quot;video-playlist&quot;&gt;&lt;/main&gt;
  &lt;/div&gt;
  &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p>JS:</p>
  <pre><code>$(document).ready(function () {
      var key = 'myKey';
      var playlistId = 'myPlaylist';
      var URL = 'https://www.googleapis.com/youtube/v3/playlistItems';
      var options = {
          part: 'snippet',
          key: key,
          maxResults: 20,
          playlistId: playlistId
      };
      
      loadVids();
  
      function loadVids() {
          $.getJSON(URL, options, function (data) {
              var id = data.items[0].snippet.resourceId.videoId;
              mainVid(id);
              resultsLoop(data);
          });
      }
      
      function mainVid(id) {
          $('#video').html(`
              &lt;div class=&quot;responsive-video&quot;&gt;
                  &lt;iframe src=&quot;https://www.youtube.com/embed/${id}&quot; frameborder=&quot;0&quot; allow=&quot;autoplay; encrypted-media&quot; allowfullscreen&gt;&lt;/iframe&gt;
              &lt;/div&gt;
          `);
      }
  
      function resultsLoop(data) {
          $.each(data.items, function (i, item) {
              var thumb = item.snippet.thumbnails.medium.url;
              var title = item.snippet.title;
              var desc = item.snippet.description.substring(0, 100);
              var vid = item.snippet.resourceId.videoId;
      
              $('main.video-playlist').append(`
                  &lt;varticle class=&quot;item&quot; data-key=&quot;${vid}&quot;&gt;
                      &lt;img src=&quot;${thumb}&quot; alt=&quot;&quot; class=&quot;vidthumb&quot;&gt;
                      &lt;div class=&quot;details&quot;&gt;
                          &lt;h4 style=&quot;float:left;font-size: 20px;font-family: sauna-boldregular;margin-bottom: 16px;&quot;&gt;${title}&lt;/h4&gt;
                          &lt;p style=&quot;float:left;&quot;&gt;${desc}…&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/varticle&gt;
              `);
          });
      }
  
      // CLICK EVENT
      $('main.video-playlist').on('click', 'varticle', function () {
          var id = $(this).attr('data-key');
          mainVid(id);
          document.getElementById('video').scrollIntoView({
              behavior: 'smooth'
          });
      });
  });
  </code></pre>