YouTube Playlist inside a Page with x-amount of videos

Issue

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

Solution

When downloading and including jQuery instead of using it from external source, the problem is gone.
Get it from here and make sure to get the compressed production version: https://jquery.com/download/

Answered By – Grimclaw Draven

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0