Плейлист YouTube на странице с x-количеством видео

Я хочу отобразить плейлист YouTube, где у меня есть основное/текущее выбранное видео вверху и x-количество видео этого плейлиста под ним.
К сожалению, кажется, что он останавливается внутри функции loadVids прямо перед $.getJSON, но я не могу найти здесь ошибку. (У меня была опечатка в вариантах, являющихся опционами, но здесь проблема не в этом)

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