页面内的 YouTube 播放列表包含 x 数量的视频

Question

我想显示一个 YouTube 播放列表，其中 main/current 选定的视频位于顶部，该播放列表的 x 数量的视频位于其下方。

遗憾的是，它似乎在 $.getJSON 之前的函数 loadVids 中停止，但我似乎无法在此处找到错误。

（我在 options being opions 处打错了，但这不是这里的问题）

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

Answer 1

当下载并包含 jQuery 而不是从外部源使用它时，问题就消失了。从这里获取并确保获得压缩的生产版本：https://jquery.com/download/

页面内的 YouTube 播放列表包含 x 数量的视频

YouTube Playlist inside a Page with x-amount of videos

javascript

youtube-api