<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		html, body {
			margin: 0;
			padding: 0;
		}
		#vidContainer {
			width: 320px;
			height: 240px;
		}
		#vidText {
			position: relative;
			z-index: 2;
			color: white;
			top: -75px;
			font-size: 60px;
			margin: 0;
			padding: 0;
			width: 100%;
			text-align: center;
			font-weight: bold;
			opacity: 0;
			font-family: "Helvetica", "Work Sans", sans-serif;
		}
	</style>
</head>
<body>
	<div id="vidContainer">
		<video width="320" height="240" autoplay loop>
		  <source src="Attract_Loop.mp4" type="video/mp4">
		  Your browser does not support the video tag.
		</video>
		<p id="vidText">??????</p>
	</div>
</body>
<script type="text/javascript">
	document.addEventListener("DOMContentLoaded", function(event) { 

		var v = document.getElementsByTagName("video")[0];

		// Changing Document Title on Click to Random Number

		document.addEventListener("click", function(event){

			document.title = Math.random();

		});


		// Displaying vidText 999.99 Value
		v.addEventListener("timeupdate", function(){

			// console.log(v.currentTime);
			if (v.currentTime >= 0.2 & v.currentTime <= 3.8) {
				document.getElementById("vidText").style.opacity = 1;
			} else {
				document.getElementById("vidText").style.opacity = 0;
			}

		});

	});
</script>
</html>