JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.githack.com/sachinchoolur/lightslider/1.1.2/dist/js/lightslider.js"></script>
<link rel="stylesheet" href="https://raw.githack.com/sachinchoolur/lightslider/1.1.2/dist/css/lightslider.css">
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
<div class="demo">
    <ul id="lightSlider">
        <li>
            <iframe width="560" height="315" frameborder="0" allowfullscreen="" src="//www.youtube.com/embed/c0asJgSyxcY?rel=0&amp;autoplay=0&controls=0&disablekb=0&wmode=opaque&enablejsapi=1" class="ls-youtube"></iframe>
        </li>
        <li>
            <iframe class="ls-vimeo" width="560" height="315" src="http://player.vimeo.com/video/1084537?autoplay=0&amp;byline=0&amp;portrait=0&amp;color=CCCCCC&api=1" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
        </li>
        <li>
            <iframe class="ls-vimeo" width="560" height="315" src="http://player.vimeo.com/video/1084537?autoplay=0&amp;byline=0&amp;portrait=0&amp;color=CCCCCC&api=1" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
        </li>
        <li>
            <iframe width="560" height="315" frameborder="0" allowfullscreen="" src="//www.youtube.com/embed/c0asJgSyxcY?wmode=opaque&enablejsapi=1" class="ls-youtube"></iframe>
        </li>
    </ul>
</div>

CSS

.demo {
    width:420px;
}
ul {
    list-style: none outside none;
    padding-left: 0;
    margin-bottom:0;
}
li {
    display: block;
    float: left;
    margin-right: 6px;
    cursor:pointer;
    overflow:hidden;
}
img {
    display: block;
    height: auto;
    max-width: 100%;
}

JavaScript

var prevSlide = null;
var slider = $('#lightSlider').lightSlider({
    item: 1,
    loop: true,
    slideMargin: 0,
    onAfterSlide: function (el) {
        prevSlide = slider.getCurrentSlideCount();
    },
    onBeforeSlide: function (el) {
        if (prevSlide) {
            console.log(prevSlide)
            var youtubePlayer = $('#lightSlider li').eq(prevSlide - 1).find('.ls-youtube').get(0),
                vimeoPlayer = $('#lightSlider li').eq(prevSlide - 1).find('.ls-vimeo').get(0);
            console.log(vimeoPlayer)
            if (youtubePlayer) {
                youtubePlayer.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
            } else if (vimeoPlayer) {
                $f(vimeoPlayer).api("pause");
            }
        }

    }
});