JSFiddle - React, Tailwind, and code Playground

by Brett

HTML

<div id="arts-background-video">
</div>

CSS

body {
    min-height: 2000px;
    background: #c8032b;
}

JavaScript

var tag = document.createElement('script');

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

var player;

function onYouTubeIframeAPIReady() {
    player = new YT.Player('arts-background-video', {
        videoId: '3i2nd24iMjw',
        height: '365',
        width: '650',
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange,
            'onError': onPlayerError
        }
    });
}

function onPlayerReady(event) {
    player.mute();
    player.playVideo();
	
	if (window.pageYOffset >= 50) {
    	player.pauseVideo();
	} 
	else {
    	player.mute();
    	player.playVideo();
	}
}

function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.ENDED) {
        player.seekTo(0);
        player.mute();
        player.playVideo();
    }

    if (event.data == YT.PlayerState.UNSTARTED) {
        //event.target.destroy();
    }
}

function onPlayerError(event) {
    switch (event.data) {
        case 2:
            player.destroy();
            //console.log(event.data);
            break;
    }
}