JSFiddle - React, Tailwind, and code Playground

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>Without extra CSS</h3>
<div class="slick-test">
    <div>
        <img src="lorempixel.com/400/200/sports/1" />
    </div>
    <div class="video">
        <img src="lorempixel.com/400/200/animals/1">
        <!-- <iframe width="940" height="529" src="http://www.youtube.com/embed/rRoy6I4gKWU?autoplay=1" frameborder="0" allowfullscreen></iframe>-->
    </div>
    <div>
        <img src="lorempixel.com/400/200/sports/2" />
    </div>
    <div>
        <img src="//lorempixel.com/400/200/sports/3" />
    </div>
</div>
    
<h3>With extra CSS</h3>
<div class="slick-test extra">
    <div>
        <img src="//lorempixel.com/400/200/sports/1" />
    </div>
    <div class="video">
        <img src="//lorempixel.com/400/200/animals/1">
        <!-- <iframe width="940" height="529" src="//www.youtube.com/embed/rRoy6I4gKWU?autoplay=1" frameborder="0" allowfullscreen></iframe>-->
    </div>
    <div>
        <img src="//lorempixel.com/400/200/sports/2" />
    </div>
    <div>
        <img src="//lorempixel.com/400/200/sports/3" />
    </div>
</div>

CSS

.extra .video {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 */
    height: 0;
}
.extra .video img {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    cursor: pointer;
}
.extra .video:after {
    content:"";
    position: absolute;
    display: block;
    background: url(//lorempixel.com/150/150/food/1) no-repeat 0 0;
    top: 45%;
    left: 45%;
    width: 46px;
    height: 36px;
    z-index: 30;
    cursor: pointer;
}
.extra .video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* image poster clicked, player class added using js */
.extra .video.player img {
    display: none;
}
.extra .video.player:after {
    display: none;
}

JavaScript

$('.slick-test').slick();


var videos = $(".video");

videos.on("click", function () {
    var elm = $(this),
        conts = elm.contents(),
        le = conts.length,
        ifr = null;

    for (var i = 0; i < le; i++) {
        if (conts[i].nodeType == 8) ifr = conts[i].textContent;
    }

    elm.addClass("player").html(ifr);
    elm.off("click");
});