JSFiddle - React, Tailwind, and code Playground

by DannyEnglander

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.slick/1.4.1/slick.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.4.1/slick.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.4.1/slick-theme.css">
<div class="main-slider" id="main-slider">

  <div>
    <div class="video-wrapper">
      <iframe class="yt-player" src="https://www.youtube.com/embed/3gk1DcFz-Uc?controls=1&rel=0&enablejsapi=1"></iframe>
    </div>
  </div>

  <div>
    <div class="video-wrapper">
      <iframe class="yt-player" src="https://www.youtube.com/embed/bdmcSj2YgJs?controls=1&rel=0&enablejsapi=1"></iframe>
    </div>
  </div>
  
  <div>
    <div class="video-wrapper">
      <iframe class="yt-player" src="https://www.youtube.com/embed/lqj-QNYsZFk?controls=1&rel=0&enablejsapi=1"></iframe>
    </div>
  </div>
  
  
</div>

CSS

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 25px;
  height: 0;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

JavaScript

var tag = document.createElement('script');
        tag.id = 'iframe-demo';
        tag.src = 'https://www.youtube.com/iframe_api';
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

        var player;

        function onYouTubeIframeAPIReady() {
          var elems1 = document.getElementsByClassName('yt-player');
          for (var i = 0; i < elems1.length; i++) {

            player = new YT.Player(elems1[i], {
              events: {
                //'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
              }
            });
          }
        }

        function onPlayerReady(event) {

        }

        function handleVideo(playerStatus) {
          if (playerStatus == -1) {
            // unstarted
            $('#main-slider').slick('slickPause');
          } else if (playerStatus == 0) {
            // ended
            $('#main-slider').slick('slickPlay');

          } else if (playerStatus == 1) {
            // playing = green                
            $('#main-slider').slick('slickPause');
          } else if (playerStatus == 2) {
            // paused = red
            $('#main-slider').slick('slickPlay');
          } else if (playerStatus == 3) {
            // buffering = purple
          } else if (playerStatus == 5) {
            // video cued
          }
        }

        function onPlayerStateChange(event) {
          handleVideo(event.data);
        }

        $(function() {
          $('#main-slider').slick({
            slidesToShow: 1,
            slidesToScroll: 1,
            autoplay: true,
            autoplaySpeed: 3000,
            pauseOnFocus: true,
            pauseOnHover: true,
            dots: true,
            infinite: true,
            adaptiveHeight: true,
            arrows: false
          });

        });

        $('#main-slider').on('beforeChange', function(event, slick, currentSlide,...