Slick Slider with auto play YouTube, Vimeo and HTML5 video

index.html

<section class="main-slider">
   <div class="item youtube">
    <iframe class="embed-player slide-media" width="100%" height="100%" src="https://www.youtube-nocookie.com/embed/9IfAjxkLn3w?enablejsapi=1&iv_load_policy=3&fs=0&rel=0&loop=1&start=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    
  </div>
   <div class="item youtube">
    <iframe class="embed-player slide-media" width="100%" height="100%" src="https://www.youtube.com/embed/IUUHhkYaKdo?enablejsapi=1&iv_load_policy=3&fs=0&rel=0&loop=1&start=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 
  
  </div>
 
  <div class="item youtube">
    <iframe class="embed-player slide-media" width="100%" height="100%" src="https://www.youtube.com/embed/RjEdWQODvrw?enablejsapi=1&iv_load_policy=3&fs=0&rel=0&loop=1&start=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 
   
  </div>
  
<!--     <div class="item vimeo" data-video-start="4">
    <iframe class="embed-player slide-media" src="https://player.vimeo.com/video/217885864?api=1&byline=0&portrait=0&title=0&background=1&mute=1&loop=1&autoplay=0&id=217885864" width="400" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> -->
    
  </div>


</section>

script.js

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 && startTime > 0 ) && !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 < 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,
    infinite: true,
  //slidesToShow: 1,
  //slidesToScroll: 1,
    autoplaySpeed:15000,
    autoplay: true,
    centerMode: true,
    variableWidth: true,
    lazyLoad:"progressive",
    speed:400,
    arrows:true,
    dots:true,
    
    cssEase:"cubic-bezier(0.87, 0.03, 0.41, 0.9)"
  });
});

// Resize event
/* $(window).on("resize.slickVideoPlayer", function(){  
  resizePlayer(iframes, 16/9);
});
*/

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>

slick-slider-with-auto-play-youtube-vimeo-and-html5-video.markdown

Slick Slider with auto play YouTube, Vimeo and HTML5 video

This sample is the tips for slick slider including YouTube, Vimeo and HTML5 video player. Each video plays automatically when the video slide has shown. And the slider fits the browser width.

A Pen by loveloop on CodePen.

License.

style.scss

$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;
  outline: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%;
}


.main-slider {
  position: relative;
  margin:0 auto;
  width: 1100px;
  height: 300px;
  margin-bottom: 50px;
  opacity: 0;
  visibility: hidden;
  transition:all 1.2s ease;
  &.slick-initialized {
    opacity: 1;
    visibility: visible;
  }
}
.slick-slide {
  cursor:pointer;
  position: relative;
  margin: 0 5px;
  margin-top: 7px;
    width: 330px;
    height: 300px;
  overflow: hidden;
  @extend %bv_hidden;
  &::before {
    @extend %filled_obj;
    @extend %bv_hidden;
    background-color: #000;
    opacity: .4;
    z-index: 1;
  }
  video {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: 300px;
    height: 300px;
    transform:translate(-50%, -50%);
  }
  iframe {
    position: relative;
    pointer-events: none;
    pointer:cursor;
  }
  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;
    &.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);
  }
  &.slick-active {
    height: 315px;
    width: 560px;
    margin-top:0px;
    z-index: 1;
    .slide-media {
      animation:slideIn 2.4s cubic-bezier(0.4, 0.29, 0.01, 1);
    } 
    &::before{display:none;}
    iframe{pointer-events:all;}
  }
}

.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;
      &:focus {
        outline: none;
      }
      &:hover {
        opacity: 1;
      }
    }
    &.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);
  }
}


.slick-prev{top: 50%;
   left: 240px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); position:absolute; z-index:999;}
.slick-next{top: 50%;
   right: 240px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); position:absolute; z-index:999;}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />