scoutman57 · October 9, 2014 23:27
diff --git a/interactive_video_test.html b/interactive_video_test.html
 <!doctype html>
 <html>
 <head>
 <title>Interactive video test</title>
 </head>
 <style type="text/css">
 	#playerContainer{
 		position:relative;
 		width:640px;
 		height:390px;
 	}
 	#playerOverlay{
 		background-color:transparent;
 		width:640px;
 		height:390px;
 		z-index:1200;
 		position:absolute;
 		top:0px;
 		left:0px;
 		z-index:2;
 	}
 	#playerOverlay:hover{
 		cursor:pointer;
 	}
 	iframe{
 		position:absolute;
 		top:0px;
 		left:0px;
 		z-index:1;
 	}
 </style>
 <body>
 <div id="playerContainer">
 <div id="player"></div>
 <div id="playerOverlay"></div>
 </div>
 	<script>

 	function Timer(callback, delay) {
 		var timerId, start, remaining = delay;

 		this.pause = function() {
 			window.clearTimeout(timerId);
 			remaining -= new Date() - start;
 		};

 		this.resume = function() {
 			start = new Date();
 			if(remaining > 0)
 				timerId = window.setTimeout(callback, remaining);
 		};

 		this.resume();
 	}
 	
 	var tag = document.createElement('script');
 	tag.src = "https://www.youtube.com/iframe_api";
 	var firstScriptTag = document.getElementsByTagName('script')[0];
 	firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
 	var player;
 	var timeout;
 	function onYouTubeIframeAPIReady() {
 		player = new YT.Player('player', {
 			height: '390',
 			width: '640',
 			videoId: 'M7lc1UVf-VE',
 			playerVars:{
 				controls: 0,
 				showinfo: 0 ,
 				modestbranding: 1,
 				wmode: "opaque"
 			},
 			events: {
 				'onReady': onPlayerReady
 			}
 		});
 		document.getElementById('playerOverlay').addEventListener('click',togglePlayback);
 	}
 	
 	function onPlayerReady(event) {
 		event.target.playVideo();
 		timeout = new Timer(setupQuestion, 19200);
 	}
 	
 	function togglePlayback()
 	{
 		if(player.getPlayerState() === YT.PlayerState.PLAYING)
 		{
 			player.pauseVideo();
 			timeout.pause();
 		}
 		else
 		{
 			player.playVideo();
 			timeout.resume();
 		}
 	}
 	
 	function setupQuestion()
 	{
 		player.pauseVideo();
 		document.getElementById('playerOverlay').removeEventListener('click',togglePlayback);
 		document.getElementById('question').style.display = 'block';
 	}
 	
 	function questionError()
 	{
 		alert('You\'re n00b yourself >;P');
 	}
 	
 	function questionOK()
 	{
 		document.getElementById('question').style.display = 'none';
 		document.getElementById('playerOverlay').addEventListener('click',togglePlayback);
 		player.playVideo();
 	}

 	</script>
 <div id="question" style="display:none">
 	<p>Before continuing this video answer the following question.</p>
 	<p>Robert is:</p>
 	<input type="radio" name="questionRadio" value="epic" onClick="questionOK()"> Epic<br>
 	<input type="radio" name="questionRadio" value="n00b" onClick="questionError()"> N00b<br>
 </div>
 </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<title>Interactive video test</title>
	</head>
	<style type="text/css">
	#playerContainer{
	position:relative;
	width:640px;
	height:390px;
	}
	#playerOverlay{
	background-color:transparent;
	width:640px;
	height:390px;
	z-index:1200;
	position:absolute;
	top:0px;
	left:0px;
	z-index:2;
	}
	#playerOverlay:hover{
	cursor:pointer;
	}
	iframe{
	position:absolute;
	top:0px;
	left:0px;
	z-index:1;
	}
	</style>
	<body>
	<div id="playerContainer">
	<div id="player"></div>
	<div id="playerOverlay"></div>
	</div>
	<script>

	function Timer(callback, delay) {
	var timerId, start, remaining = delay;

	this.pause = function() {
	window.clearTimeout(timerId);
	remaining -= new Date() - start;
	};

	this.resume = function() {
	start = new Date();
	if(remaining > 0)
	timerId = window.setTimeout(callback, remaining);
	};

	this.resume();
	}

	var tag = document.createElement('script');
	tag.src = "https://www.youtube.com/iframe_api";
	var firstScriptTag = document.getElementsByTagName('script')[0];
	firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
	var player;
	var timeout;
	function onYouTubeIframeAPIReady() {
	player = new YT.Player('player', {
	height: '390',
	width: '640',
	videoId: 'M7lc1UVf-VE',
	playerVars:{
	controls: 0,
	showinfo: 0 ,
	modestbranding: 1,
	wmode: "opaque"
	},
	events: {
	'onReady': onPlayerReady
	}
	});
	document.getElementById('playerOverlay').addEventListener('click',togglePlayback);
	}

	function onPlayerReady(event) {
	event.target.playVideo();
	timeout = new Timer(setupQuestion, 19200);
	}

	function togglePlayback()
	{
	if(player.getPlayerState() === YT.PlayerState.PLAYING)
	{
	player.pauseVideo();
	timeout.pause();
	}
	else
	{
	player.playVideo();
	timeout.resume();
	}
	}

	function setupQuestion()
	{
	player.pauseVideo();
	document.getElementById('playerOverlay').removeEventListener('click',togglePlayback);
	document.getElementById('question').style.display = 'block';
	}

	function questionError()
	{
	alert('You\'re n00b yourself >;P');
	}

	function questionOK()
	{
	document.getElementById('question').style.display = 'none';
	document.getElementById('playerOverlay').addEventListener('click',togglePlayback);
	player.playVideo();
	}

	</script>
	<div id="question" style="display:none">
	<p>Before continuing this video answer the following question.</p>
	<p>Robert is:</p>
	<input type="radio" name="questionRadio" value="epic" onClick="questionOK()"> Epic<br>
	<input type="radio" name="questionRadio" value="n00b" onClick="questionError()"> N00b<br>
	</div>
	</body>
	</html>