<html>
<head>
	<title></title>
	<meta charset="utf-8" />
<style type="text/css">
#ytplayer {
	padding: 20px;
	width: 320px;
}
#playerdiv {
	width: 360px;
	background: white;
}
#playerdiv.detected {
	background: red;	
}
#playerdiv.undetected {
	background: green;	
}
</style>
</head>
<body>

<div class="alllinks">
	<div class="detected">
		<div>COPYRIGHT DETECTED</div>
		<div>
			<a href="https://www.youtube.com/watch?v=4ExUF1khFOQ">pitch-25</a>
			<a href="https://www.youtube.com/watch?v=06fUhmj3uws">pitch+25</a>
			<a href="https://www.youtube.com/watch?v=B3Y66QAqoOs">time+25</a>
			<a href="https://www.youtube.com/watch?v=0B3rpUz_LMc">time-25</a>
			<a href="https://www.youtube.com/watch?v=AJfvyxbIYlk">resample@11025Hz</a>
			<a href="https://www.youtube.com/watch?v=u9DS7cFg4G4">noise recording only noise</a>
			<a href="https://www.youtube.com/watch?v=L3sUb5_jTW8">2songs</a>
		</div>
	</div>
	<div class="undetected">
		<div>Copyright NOT detected</div>
		<a href="https://www.youtube.com/watch?v=Lw9GcLTx6qE">reversed</a>
		<a href="https://www.youtube.com/watch?v=HdWtRLQNzq4">noise recording crowd music same distance</a>
		<a href="https://www.youtube.com/watch?v=NSNipke4ka8">noise recording crowd music far</a>
		<a href="https://www.youtube.com/watch?v=0p_5MvfQnWw">chunks mixed 15s</a>
		<a href="https://www.youtube.com/watch?v=NgPeKflGqtM">vocals isolated</a>
		<a href="https://www.youtube.com/watch?v=PzlmAnD1JmI">vocals removed</a>
	</div>
</div>

<div id="playerdiv" class="">
	<div id="ytplayer"></div>
</div>

<script>
// Load the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// Replace the 'ytplayer' element with an <iframe> and
// YouTube player after the API code downloads.
var player = null;
var playerdiv = document.getElementById("playerdiv");

function onYouTubePlayerAPIReady() {}

function extract_ytid (href) {
	return href.match(/v=?(.+)/)[1]
}

function play (youtubeid) {
	if (player === null) {
	    player = new YT.Player('ytplayer', {
	      height: '80',
	      width: '320',
	      autoplay: true,
	      videoId: youtubeid,
	      events: {
	      	'onReady': onPlayerReady
	      }
	    });		
	} else {
		player.loadVideoById({'videoId': youtubeid, 'events': { 'onReady': onPlayerReady }})
	}
}

function onPlayerReady () {
	player.playVideo();
}

function $ (sel, callback) {
	var ll = document.querySelectorAll(sel);
	return Array.prototype.slice.call(ll);
}

$(".detected a").forEach(function (a) {
	a.addEventListener("click", function (e) {
		play(extract_ytid(this.href));
		e.preventDefault();
		playerdiv.setAttribute("class", "");
		// show the "result" after a delay
		window.setTimeout(function () {
			playerdiv.setAttribute("class", "detected");
		}, 2500);
	});
});
$(".undetected a").forEach(function (a) {
	a.addEventListener("click", function (e) {
		play(extract_ytid(this.href));
		e.preventDefault();
		playerdiv.setAttribute("class", "");
		// show the "result" after a delay
		window.setTimeout(function () {
			playerdiv.setAttribute("class", "undetected");
		}, 2500);
	});
});

</script>



</body>
</html>