Quiero mostrar una lista de reproducción de YouTube, donde tengo el video seleccionado principal/actual en la parte superior y una cantidad x de videos de esa lista de reproducción debajo.

Lamentablemente, parece detenerse dentro de la función loadVids justo antes de $.getJSON, pero parece que no puedo encontrar el error aquí.

(Tuve un error tipográfico en que las opciones eran opciones, pero ese no es el problema aquí)

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' }); }); });