Header slider issue on bg video using youtube

Hi Support,

I am copying your slider code based on the 'header-transparent.html', am using the youtube video as my slider background, however the video slider does not auto slide to next when it finished, it just keep looping the first slide video.

1. How can i move to next video on 1st video end?

2. Can i set the cover image before the video able to load?

3. How can ensure the video can fit in different screen size? Currently, it does cut off some part the video.

Here my slider code:

<!-- #slider start -->
<section id="slider" data-loop="true" data-autoheight="true" class="slider-element slider-parallax swiper_wrapper clearfix " style="height: 600px;">
<div class="swiper-container swiper-parent">

<div class="swiper-wrapper">
<div class="swiper-slide dark">
<div class="yt-bg-player nomargin dark" data-autoplay="false" data-start="3" data-stop="30" data-fullscreen="true" data-video="https://youtu.be/WNCl-69POro">
<div class="container-fluid vertical-middle center clearfix">
</div>
</div>
<div class="video-overlay" style="background-color: rgba(0,0,0,0.1);"></div>
</div>
<div class="swiper-slide dark">
<div class="container center vertical-middle clearfix">
</div>
<div class="yt-bg-player" style="z-index: auto;" data-quality="hd1080" data-start="30" data-stop="45" data-video="https://youtu.be/qgzn86vgbDE" />
</div>
</div>
<div class="swiper-slide dark" style="background-image: url('http://themes.semicolonweb.com/html/canvas/images/slider/swiper/1.jpg'); background-position: center top;">
<div class="container clearfix">
<div class="slider-caption">
</div>
</div>
</div>
</div>
<div class="slider-arrow-left"><i class="icon-angle-left"></i></div>
<div class="slider-arrow-right"><i class="icon-angle-right"></i></div>
<!-- <div class="swiper-pagination"></div> -->
</div>
</section>
<!-- #slider end -->