JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<body>

<video controls="controls" autoplay="true">
    <source src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" type="video/webm" />
</video>
    
<div id="subtitle">&nbsp;</div>

</body>

CSS

html {
	display: table;
	width: 100%;
	height: 100%;
}
body {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	transition: 0.5s;
}
video {
    width: 640px;
}
#subtitle {
	margin-top: 15px;
	color: #19AADB;
	font-family: 'Segoe UI', Helvetica, Arial, sans-serif;
	font-weight: bold;
	font-size: 22px;
	transition: 0.25s;
}

JavaScript

function setSubtitle(text) {
	document.getElementById('subtitle').innerHTML = text;
	document.getElementById('subtitle').style.opacity = 1;
}
function hideSubtitle() {
	document.getElementById('subtitle').style.opacity = 0;
}
function fadeOut() {
	document.body.style.background = 'black';
	hideSubtitle();
}
function setBg(colorString) {
	document.body.style.background = colorString;
}

function timeHandler(e) {
	var time = e.target.currentTime;
	
	if (time < 3.8) {
		setBg('#FBFBFB');
		setSubtitle('A Peach Open Movie Project bemutatja');
	}
	else if (time < 6.5) {
		fadeOut();
	}
	else if (time < 9) {
		setBg('#FBFBFB');
		setSubtitle('Egy óriási nyúl');
	}
	else if (time < 11) {
		fadeOut();
	}
	else if (time < 13) {
		setBg('#FBFBFB');
		setSubtitle('Három rágcsáló');
	}
	else if (time < 16.5) {
		fadeOut();
	}
	else if (time < 18.7) {
		setBg('#FBFBFB');
		setSubtitle('És egy óriási visszavágó');
	}
	else if (time < 23) {
		fadeOut();
	}
	else if (time < 25) {
		setBg('#FBFBFB');
		setSubtitle('Készülj fel!');
	}
	else if (time < 26.5) {
		fadeOut();
	}
	else {
		setBg('#FBFBFB');
		if (time < 30) {
			setSubtitle('A nagy bagzó nyuszi');
		}
		else {
			setSubtitle('Hamarosan a mozikban!');
		}
	}
}

document.querySelector('video').ontimeupdate = timeHandler;
document.querySelector('video').onended = function() { hideSubtitle(); setBg('#F9F9F9'); };