<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>