JSFiddle - React, Tailwind, and code Playground

by Brett

HTML

<script>
    var tag = document.createElement('script');
  	tag.src = "//www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
        
    var player;
    var player2;
    function onYouTubeIframeAPIReady() {
        player = new YT.Player('arts-background-video', {
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange,
                'onError': onPlayerError
            }
        });
        player2 = new YT.Player('arts-video', {
            events: {
                'onStateChange': onPlayer2StateChange
            }
        });
    }
    function onPlayerReady(event) {
        player.mute();
        //player.setPlaybackQuality(highres);
        player.playVideo();
    }
    function onPlayerStateChange(event) { 
        if(event.data == YT.PlayerState.ENDED) {
            player.seekTo(0);
            player.mute();
            player.playVideo();
        }
        if(event.data == YT.PlayerState.UNSTARTED) {
        		player.destroy();
        }
    }
    function onPlayerError(event) {
    		switch(event.data) {
        case 2 || 100 || 101 || 150:
            player.destroy();
            console.log(event.data); // output error code
            break;
        };
    }
    function onPlayer2StateChange(event) { 
        if(event.data == YT.PlayerState.PLAYING) {
            player.pauseVideo();
        }
        if(event.data == YT.PlayerState.PAUSED) {
        		player.playVideo();
        }
    }
    function autoplayScroll(event) {
   			if(window.pageYOffset > 350) {
            player.pauseVideo();
        } else {
        		player.playVideo();
        }
		}
		window.onscroll = autoplayScroll;
</script>
<br/>
<h2>Background video (autoplay):</h2>
<iframe id="arts-background-video" width="700" height="415"...

CSS

body { 
 min-height: 2000px;
}