Skip to content

Instantly share code, notes, and snippets.

@mrmoyeez
Created June 22, 2020 15:03
Show Gist options
  • Save mrmoyeez/a85e3bcae3193565f82607cc1ce90a7d to your computer and use it in GitHub Desktop.
Save mrmoyeez/a85e3bcae3193565f82607cc1ce90a7d to your computer and use it in GitHub Desktop.
Slick Slider with auto play YouTube, Vimeo and HTML5 video
<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>
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);
});
*/
<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

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.

$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;}
<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" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment