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.
Sadly it seems to stop inside the function loadVids right before $.getJSON, but i cant seem to find the error here.(I had a typo at options beeing opions, but that isn't the problem here)
HTML:
<div class="vidcontainer"><section id="video"></section><main class="video-playlist"></main></div><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>JS:
$(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(`<div class="responsive-video"><iframe src="https://www.youtube.com/embed/${id}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div> `); } 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(`<varticle class="item" data-key="${vid}"><img src="${thumb}" alt="" class="vidthumb"><div class="details"><h4 style="float:left;font-size: 20px;font-family: sauna-boldregular;margin-bottom: 16px;">${title}</h4><p style="float:left;">${desc}…</p></div></varticle> `); }); } // CLICK EVENT $('main.video-playlist').on('click', 'varticle', function () { var id = $(this).attr('data-key'); mainVid(id); document.getElementById('video').scrollIntoView({ behavior: 'smooth' }); });});