Slick slider with video carousel

Question

Hello team, Hope you are doing good!! Can any one guide me on slick carousel with video frame. Can any one help me with example or reference. Looking forward to hear from you. Thak you!!

Sachin Singh · Answer

this is simple bootstrap carosel with video "stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" > "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" > "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" > "carouselExampleControls" class = "carousel slide" data-ride= "carousel" > class = "carousel-inner" > class = "carousel-item active" > "420" height= "315" src= "https://www.youtube.com/embed/tgbNymZ7vqY" > class = "carousel-item" > "420" height= "315" src= "https://www.youtube.com/embed/tgbNymZ7vqY" > class = "carousel-item" > "420" height= "315" src= "https://www.youtube.com/embed/tgbNymZ7vqY" > class = "carousel-control-prev" href= "#carouselExampleControls" role= "button" data-slide= "prev" > class = "carousel-control-prev-icon" aria-hidden= "true" > class = "sr-only" >Previous class = "carousel-control-next" href= "#carouselExampleControls" role= "button" data-slide= "next" > class = "carousel-control-next-icon" aria-hidden= "true" > class = "sr-only" >Next

Sachin Singh · Answer

please use below code class = "main-slider" > class = "item youtube" > 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> class = "item youtube" > 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> class = "item youtube" > 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> class = "item vimeo" data-video-start= "4" > 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> --> $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;} 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 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); }); */

Aman Gupta · Answer

Same question is answered here, https://stackoverflow.com/questions/31521763/slick-js-and-html5-video-autoplay-and-pause-on-video