JSFiddle - React, Tailwind, and code Playground

by John-Philip Johansson

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.3.13/slick.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.3.13/slick.css">
<h3>Slick.js with iframe (work in progress)</h3>
<div class="slick-test">
    <div>
        <img src="//lorempixel.com/400/200/sports/1" />
    </div>
    <div class="video" data-iframe="//www.youtube.com/embed/rRoy6I4gKWU?autoplay=1">
        <img src="//lorempixel.com/400/200/animals/1" />
    </div>
    <div>
        <img src="//lorempixel.com/400/200/sports/2" />
    </div>
    <div>
        <img src="//lorempixel.com/400/200/sports/3" />
    </div>
</div>

CSS

.slick-test .video {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
}
.slick-test .video iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    border: 0;
}

JavaScript

// Initialize Slick
$('.slick-test').slick();

// Code for adding iframe support
$(".video").each(function() {
    var $this = $(this);
    var $img = $this.find('img');
    var iframeUrl = $this.data('iframe');
    
    var $iframe = $('<iframe src="' + iframeUrl + '"></iframe>');
   
    function showIframe() {
        $this.append($iframe);
        $img.hide();
    }
    
    function hideIframe() {
        $img.show();
        
        $iframe.remove(); // we need to remove it because we depend on autoplay
    }
    
    // Ugly trick to detect click in iframe.
    //$(window).blur(hideIframe);
    
    $this.click(showIframe);
});