JSFiddle - React, Tailwind, and code Playground

HTML

<div id="clignotant" style="background-color:#FF6666;width:500px;
height:100px;line-height:100px;text-align:center;">
    This box, and the text in it, are blinking
</div>

JavaScript

var pad = 0;

$('#clignotant').click(function() {
    if (pad==0) {
        pad++;
        blink(this, 800, 2);
    }else{
        alert('Not document load, so now you can go to the streaming video');
    }
});
counter = 0;
function blink(selector, blink_speed, iterations){
	
	$(selector).animate({opacity:0}, 50, "linear", function(){
		$(this).delay(blink_speed);
		$(this).animate({opacity:1}, 50, function(){
			if (iterations == 0) {
				blink(this, blink_speed, iterations);
			}else if (counter>iterations) {
				return false;
			}else{
				counter++;
				blink(this, blink_speed, iterations);
			}
		});
		$(this).delay(blink_speed);
	});
}

//This line must come *AFTER* the $('#clignotant').click() function !!
window.load($('#clignotant').trigger('click'));