JSON Youtube视频轮播

如何解决JSON Youtube视频轮播

我正在尝试使用JSON和BxSlider创建Youtube视频轮播。 这些视频正在加载JS，点击后会弹出一个窗口。

这一切都与唯一的事情一起起作用，而不是将所有视频都显示为轮播，而是仅显示其中一个。我已经尝试了很多方法，使用数组等，但是找不到将其余视频作为轮播方式加载的方法。

这是我创建的codepen，下面是我正在使用的代码：

<h2>Videos</h2>

<div class="blackout">&nbsp;</div>

<div class="yt-player">
<div class="yt-player"><iframe></iframe></div>
</div>
  
  </div>




$(document).ready(function(){

  // Video playlist
  var videos = '0ExTYouadBM,y-Jx1tWZ_GA,Oh6QSomwTaQ'; 



  // Inject video playlist
  $('.container.content').after( '<ul id="videos"></ul>' );
  q = 'https://www.googleapis.com/youtube/v3/videos?id='+videos+'&key=AIzaSyAKEXb80npttUTLKOv2wWAXpE2InBoWids&fields=items(snippet(title),id)&part=snippet';
  console.log(q);
  $.ajax({
    url: q,dataType: "jsonp",success: function(data){
      for (i = 0; i < data.items.length; i++) {
        $('ul#videos').append('<li><a id="'+data.items[i].id+'"><img src="https://img.youtube.com/vi/'+data.items[i].id+'/hqdefault.jpg" /><span>'+data.items[i].snippet.title+'</span></a></li>');
        if ( i+1 == data.items.length ) { 
          $('ul#videos').bxSlider( { minSlides: 2,maxSlides : 5,slideWidth : 480,moveSlides : 1,pager : false } );
          $('ul#videos a').click(function () {
            vid = $(this).attr('id');
            $('.blackout,.yt-player').show();
            $('.yt-player iframe').attr('src','https://www.youtube.com/embed/'+vid);
            $('.blackout').click( function () {
              $('.blackout,.yt-player').hide();
              $('.yt-player iframe').attr('src','');
            } );
          });
        }
      }
    },error: function(jqXHR,textStatus,errorThrown) {
        console.log(textStatus,+ ' | ' + errorThrown);
    }
  });

}); ```