Api Cycle2滑块与自动播放视频

我期待创建一个滑块，其中有视频和图片。我使用Cycle2作为基本代码。到目前为止，我已经能够使用这里提供的代码获得一个基本的滑块，其中包含图像和视频：

以下是在上述链接中找到的最终结果的代码笔：

我的问题是，有没有办法让它在到达视频幻灯片时自动播放？我猜您必须结合使用此处的Cycle2 API和此处的YouTube API：

说到这件事，我完全是个傻瓜，仅仅浏览一下API信息就让我不知所措。有什么想法吗

HTML

JS

<div class="page-wrapper">
  <div id="slider" class="cycle-slideshow" data-cycle-timeout="6000" data-cycle-fx="scrollHorz" data-cycle-slides=">.slide">
    <!-- slide -->
    <div class="slide">
      <img src="http://via.placeholder.com/1600x650" width="600" height="650" class="slide-image" alt="">
    </div>
    <!-- slide -->

    <div class="slide">
        <div class="video-wrap">
          <iframe id="player" width="560" height="315" src="https://www.youtube.com/embed/Lscb4SL58X4?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
      </div>
    </div>
    <!-- slide -->

  </div>
  <!-- slider -->

</div>
<!-- page-wrapper -->

.page-wrapper {
  max-width: 1600px;
  margin: 0 auto;
}

#slider {
  width: 100%;
  margin: 0;
  border: 0;
}
#slider .slide {
  width: 100%;
  display: none;
  position: relative;
}
#slider .slide:first-child {
  display: block;
}
#slider .slide img {
  width: 100%;
}

.video-wrap {
  position: relative;
  padding-bottom: 40.625%;
  height: 0;
  overflow: hidden;
}

.video-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

var player
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      events: {
        'onStateChange': onPlayerStateChange,
      }
    });
  }

  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING) {
      $('#slider').cycle('pause');
    }
    if (event.data == YT.PlayerState.ENDED){
      $('#slider').cycle('resume');
    }
  }
  function stopVideo() {
    player.stopVideo();
  }