JSFiddle - React, Tailwind, and code Playground

by Muthuraman B

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/OGrj7TKptB8?controls=1&rel=0&enablejsapi=1"></iframe>
				</div>
			</div>
			<div>
				<div class="video-wrapper">
					<iframe class="yt-player" src="https://www.youtube.com/embed/IgjIOC43IiM?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: false,
                pauseOnHover: false,
                dots: true,
       ...