JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<iframe id="countdown-video" class="vid" width="420" height="315" src="#" frameborder="0" allowfullscreen></iframe>
JavaScript
$(document).ready(function() {
function checkTime() {
var url = 'https://www.youtube.com/embed/vifsqv_QXB0',
start = 12, //18:00 = 6PM
end = 20, //20:00 = 8PM
now = new Date().getHours(); //will return a number between 0 - 23
console.log(start, now, end);
if (start <= now && now >= end) {
$('#countdown-video').attr('src', url);
$('#countdown-video').addClass('now-playing');
}
if (!$('#countdown-video').hasClass('now-playing')) {
setTimeout(checkTime(), 1000); //10000 ms = 10 seconds, 1000 ms = 1 second
}
}
//run once to get the counter started
checkTime();
});