title: autoplay with slick slider and videos
body: <p>I already made a long search here for the solution, but can't find anything...</p>
  
  <p>I'm using the code from this pen: <a href="https://codepen.io/digistate/pen/MvapbE" rel="nofollow noreferrer">https://codepen.io/digistate/pen/MvapbE</a></p>
  
  <p>I changed the videos for youtube, the autoplay works nice, but the slider is not automated, I would like the slide change to another item automatically, image or video, and when this item is video, it autoplay until the end, and after that change for the next item...</p>
  
  <p>It can be done?</p>
  
  <p>Thanks!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var slideWrapper = $(".main-slider"),
      iframes = slideWrapper.find('.embed-player'),
      lazyImages = slideWrapper.find('.slide-image'),
      lazyCounter = 0;
  
  // POST commands to YouTube or Vimeo API
  function postMessageToPlayer(player, command){
    if (player == null || command == null) return;
    player.contentWindow.postMessage(JSON.stringify(command), "*");
  }
  
  // When the slide is changing
  function playPauseVideo(slick, control){
    var currentSlide, slideType, startTime, player, video;
  
    currentSlide = slick.find(".slick-current");
    slideType = currentSlide.attr("class").split(" ")[1];
    player = currentSlide.find("iframe").get(0);
    startTime = currentSlide.data("video-start");
  
    if (slideType === "vimeo") {
      switch (control) {
        case "play":
          if ((startTime != null &amp;&amp; startTime &gt; 0 ) &amp;&amp; !currentSlide.hasClass('started')) {
            currentSlide.addClass('started');
            postMessageToPlayer(player, {
              "method": "setCurrentTime",
              "value" : startTime
            });
          }
          postMessageToPlayer(player, {
            "method": "play",
            "value" : 1
          });
          break;
        case "pause":
          postMessageToPlayer(player, {
            "method": "pause",
            "value": 1
          });
          break;
      }
    } else if (slideType === "youtube") {
      switch (control) {
        case "play":
          postMessageToPlayer(player, {
            "event": "command",
            "func": "mute"
          });
          postMessageToPlayer(player, {
            "event": "command",
            "func": "playVideo"
          });
          break;
        case "pause":
          postMessageToPlayer(player, {
            "event": "command",
            "func": "pauseVideo"
          });
          break;
      }
    } else if (slideType === "video") {
      video = currentSlide.children("video").get(0);
      if (video != null) {
        if (control === "play"){
          video.play();
        } else {
          video.pause();
        }
      }
    }
  }
  
  // Resize player
  function resizePlayer(iframes, ratio) {
    if (!iframes[0]) return;
    var win = $(".main-slider"),
        width = win.width(),
        playerWidth,
        height = win.height(),
        playerHeight,
        ratio = ratio || 16/9;
  
    iframes.each(function(){
      var current = $(this);
      if (width / ratio &lt; height) {
        playerWidth = Math.ceil(height * ratio);
        current.width(playerWidth).height(height).css({
          left: (width - playerWidth) / 2,
           top: 0
          });
      } else {
        playerHeight = Math.ceil(width / ratio);
        current.width(width).height(playerHeight).css({
          left: 0,
          top: (height - playerHeight) / 2
        });
      }
    });
  }
  
  // DOM Ready
  $(function() {
    // Initialize
    slideWrapper.on("init", function(slick){
      slick = $(slick.currentTarget);
      setTimeout(function(){
        playPauseVideo(slick,"play");
      }, 1000);
      resizePlayer(iframes, 16/9);
    });
    slideWrapper.on("beforeChange", function(event, slick) {
      slick = $(slick.$slider);
      playPauseVideo(slick,"pause");
    });
    slideWrapper.on("afterChange", function(event, slick) {
      slick = $(slick.$slider);
      playPauseVideo(slick,"play");
    });
    slideWrapper.on("lazyLoaded", function(event, slick, image, imageSource) {
      lazyCounter++;
      if (lazyCounter === lazyImages.length){
        lazyImages.addClass('show');
        // slideWrapper.slick("slickPlay");
      }
    });
  
    //start the slider
    slideWrapper.slick({
      // fade:true,
      autoplaySpeed:4000,
      lazyLoad:"progressive",
      speed:600,
      arrows:false,
      dots:true,
      cssEase:"cubic-bezier(0.87, 0.03, 0.41, 0.9)"
    });
  });
  
  // Resize event
  $(window).on("resize.slickVideoPlayer", function(){  
    resizePlayer(iframes, 16/9);
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>$fonts: Arial, "Hiragino Kaku Gothic Pro W3", Meiryo, sans-serif;
  $bg_color: #2d3042;
  $font_color: #efefef;
  $link_color: #efefef;
  $link_hover_color: #fff;
  
  *, *:before, *:after {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
  body {
    font-family: $fonts;
    background-color: $bg_color;
    position: relative;
    color: $font_color;
    text-align: center;
    a, a:visited {
      color: $link_color;
      text-decoration: none;
    }
    a:hover {
      color: $link_hover_color;
    }
  }
  %bv_hidden {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  %filled_obj {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    padding: 0 5%;
    text-align: left;
    z-index: 1;
    h1 {
      display: inline-block;
      font-size: 22px;
      font-weight: bold;
      padding-top: 18px;
    }
    nav {
      display: inline-block;
      float: right;
      ul {
        li {
          display: inline-block;
          vertical-align: top;
          font-size: 13px;
          a {
            display: block;
            padding: 24px 15px;
            &amp;:hover {
              background-color: rgba(#fff, .18);
            }
          }
        }
      }
    }
  }
  
  .main-slider {
    position: relative;
    width: 100%;
    height: 38vw;
    min-height: 8vw;
    margin-bottom: 50px;
    opacity: 0;
    visibility: hidden;
    transition:all 1.2s ease;
    &amp;.slick-initialized {
      opacity: 1;
      visibility: visible;
    }
  }
  .slick-slide {
    position: relative;
    height: 38vw;
    @extend %bv_hidden;
    &amp;::before {
      @extend %filled_obj;
      @extend %bv_hidden;
      background-color: #000;
      opacity: .3;
      z-index: 1;
    }
    video {
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      min-width: 100%;
      min-height: 100%;
      width: auto;
      height: auto;
      transform:translate(-50%, -50%);
    }
    iframe {
      position: relative;
      pointer-events: none;
    }
    figure {
      position: relative;
      height: 100%;
    }
    .slide-image {
      opacity: 0;
      height: 100%;
      background-size: cover;
      background-position: center;
      // background-color:rgba(#c46897,.38);
      // background-blend-mode:overlay;
      transition:all .8s ease;
      &amp;.show {
        opacity: 1;
      }
    }
    .image-entity {
      width: 100%;
      opacity: 0;
      visibility: hidden;
    }
    .loading {
      position: absolute;
      top: 44%;
      left: 0;
      width: 100%;
    }
    .slide-media {
      animation:slideOut .4s cubic-bezier(0.4, 0.29, 0.01, 1);
    }
    &amp;.slick-active {
      z-index: 1;
      .slide-media {
        animation:slideIn 2.4s cubic-bezier(0.4, 0.29, 0.01, 1);
      }
      .caption {
        opacity: 1;
        transform:translateY(0);
        transition:all .7s cubic-bezier(0.32, 0.34, 0, 1.62) .6s;
      }
    }
  }
  .caption {
    position: absolute;
    top: 44%;
    left: 5%;
    text-align: center;
    padding: 20px;
    border: 3px solid;
    color: #fff;
    margin: 0;
    font-size: 40px;
    font-weight: bold;
    letter-spacing: .02em;
    opacity: 0;
    z-index: 1;
    transition:all .3s ease;
    transform:translateY(100px);
    @extend %bv_hidden;
  }
  
  .slick-dots {
    text-align: center;
    padding-top: 15px;
    li {
      display: inline-block;
      vertical-align: top;
      margin: 0 8px;
      button {
        width: 16px;
        height: 16px;
        border: none;
        cursor: pointer;
        border-radius: 50%;
        border: 2px solid #fff;
        box-shadow: 0 0 0 0 transparent;
        vertical-align: middle;
        color: #fff;
        background-color: #fff;
        transition:all .3s ease;
        opacity: .4;
        &amp;:focus {
          outline: none;
        }
        &amp;:hover {
          opacity: 1;
        }
      }
      &amp;.slick-active {
        button {
          border-color: $bg_color;
          box-shadow: 0 0 0 2px #fff;
          opacity: 1;
        }
      }
    }
  }
  
  .container {
    background-color: #f2f2f2;
    color: #444;
    line-height: 1.6;
    padding: 40px 0;
    .content {
      width: 90%;
      max-width: 980px;
      margin: 0 auto;
    }
    p {
      margin-bottom: 40px;
    }
  }
  
  @keyframes slideIn {
    from {
      filter:blur(15px);
    }
    to {
      filter:blur(0);
    }
  }
  @keyframes slideOut {
    from {
      filter:blur(0);
    }
    to {
      filter:blur(15px);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header&gt;
    &lt;h1&gt;SITE TITLE&lt;/h1&gt;
    &lt;nav&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt;HOME&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;ABOUT&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;SERVICES&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
  &lt;/header&gt;
  &lt;section class="main-slider"&gt;
    &lt;div class="item image"&gt;
      &lt;span class="loading"&gt;Loading...&lt;/span&gt;
      &lt;figure&gt;
        &lt;div class="slide-image slide-media" style="background-image:url('https://drive.google.com/uc?export=view&amp;id=0B_koKn2rKOkLRkY4S0JDTk1BbE0');"&gt;
          &lt;img data-lazy="https://drive.google.com/uc?export=view&amp;id=0B_koKn2rKOkLRkY4S0JDTk1BbE0" class="image-entity" /&gt;
        &lt;/div&gt;
        &lt;figcaption class="caption"&gt;Static Image&lt;/figcaption&gt;
      &lt;/figure&gt;
    &lt;/div&gt;
    &lt;div class="item vimeo" data-video-start="4"&gt;
      &lt;iframe class="embed-player slide-media" src="https://player.vimeo.com/video/217885864?api=1&amp;byline=0&amp;portrait=0&amp;title=0&amp;background=1&amp;mute=1&amp;loop=1&amp;autoplay=0&amp;id=217885864" width="980" height="520" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen&gt;&lt;/iframe&gt;
      &lt;p class="caption"&gt;Vimeo&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="item image"&gt;
      &lt;figure&gt;
        &lt;div class="slide-image slide-media" style="background-image:url('https://drive.google.com/uc?export=view&amp;id=0B_koKn2rKOkLNXBIcEdOUFVIWmM');"&gt;
          &lt;img data-lazy="https://drive.google.com/uc?export=view&amp;id=0B_koKn2rKOkLNXBIcEdOUFVIWmM" class="image-entity" /&gt;
        &lt;/div&gt;
        &lt;figcaption class="caption"&gt;Static Image&lt;/figcaption&gt;
      &lt;/figure&gt;
    &lt;/div&gt;
    &lt;div class="item youtube"&gt;
      &lt;iframe class="embed-player slide-media" width="980" height="520" src="https://www.youtube.com/embed/QV5EXOFcdrQ?enablejsapi=1&amp;controls=0&amp;fs=0&amp;iv_load_policy=3&amp;rel=0&amp;showinfo=0&amp;loop=1&amp;playlist=QV5EXOFcdrQ&amp;start=1" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt; 
      &lt;p class="caption"&gt;YouTube&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="item image"&gt;
      &lt;figure&gt;
        &lt;div class="slide-image slide-media" style="background-image:url('https://drive.google.com/uc?export=view&amp;id=0B_koKn2rKOkLSlBkWDBsWXJNazQ');"&gt;
          &lt;img data-lazy="https://drive.google.com/uc?export=view&amp;id=0B_koKn2rKOkLSlBkWDBsWXJNazQ" class="image-entity" /&gt;
        &lt;/div&gt;
        &lt;figcaption class="caption"&gt;Static Image&lt;/figcaption&gt;
      &lt;/figure&gt;
    &lt;/div&gt;
    &lt;div class="item video"&gt;
      &lt;video class="slide-video slide-media" loop muted preload="metadata" poster="https://drive.google.com/uc?export=view&amp;id=0B_koKn2rKOkLSXZCakVGZWhOV00"&gt;
        &lt;source src="https://player.vimeo.com/external/138504815.sd.mp4?s=8a71ff38f08ec81efe50d35915afd426765a7526&amp;profile_id=112" type="video/mp4" /&gt;
      &lt;/video&gt;
      &lt;p class="caption"&gt;HTML 5 Video&lt;/p&gt;
    &lt;/div&gt;
  &lt;/section&gt;
  &lt;section class="container"&gt;
    &lt;div class="content"&gt;
      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit veniam quisquam, rem illum dicta cumque, voluptate fugiat impedit beatae rerum ratione, voluptates nisi magni delectus ab, eaque atque iste. Molestias incidunt nemo veniam alias nam nisi distinctio optio error architecto odit! Illo dicta nulla fugiat distinctio laudantium, corrupti eum unde.&lt;/p&gt;
  
      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit veniam quisquam, rem illum dicta cumque, voluptate fugiat impedit beatae rerum ratione, voluptates nisi magni delectus ab, eaque atque iste. Molestias incidunt nemo veniam alias nam nisi distinctio optio error architecto odit! Illo dicta nulla fugiat distinctio laudantium, corrupti eum unde. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit veniam quisquam, rem illum dicta cumque, voluptate fugiat impedit beatae rerum ratione, voluptates nisi magni delectus ab, eaque atque iste. Molestias incidunt nemo veniam alias nam nisi distinctio optio error architecto odit! Illo dicta nulla fugiat distinctio laudantium, corrupti eum unde.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>