JSFiddle - React, Tailwind, and code Playground

by steveseguin

HTML

<video width="400"  autoplay mute muted loop=true>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>
  <div id="checker-board">
		<div class="dark square"></div>
		<div class="light square"></div>
		<div class="dark square"></div>
		<div class="light square"></div>
		<div class="dark square"></div>
		<div class="light square"></div>
		<div class="dark square"></div>
		<div class="light square"></div>

		<div class="light square"></div>
		<div class="dark square"></div>
		<div class="light square"></div>
		<div class="dark square"></div>
		<div class="light square"></div>
		<div class="dark square"></div>
		<div class="light square"></div>
		<div class="dark square"></div>

		<div class="dark square"></div>
		<div class="light square"></div>
		<div class="dark square"></div>
		<div class="light square"></div>
		<div class="dark square"></div>
		<div class="light square"></div>
		<div class="dark square"></div>
		<div class="light square"></div>

		<div class="light square"></div>
		<div class="dark square"></div>
		<div class="light square"></div>
		<div class="dark square"></div>
		<div class="light square"></div>
		<div class="dark square"></div>
		<div class="light square"></div>
		<div class="dark square"></div>



	</div>

CSS

#checker-board {
		width: 400px;
		height: 200px;
		position: absolute;
    left: 0;
    top: 0;
	}
	.square {
		width: 50px;
		height: 50px;
		float: left;
	}
  video {
    position: absolute;
    left: 0;
    top: 0;
    width: 400px;
  }

JavaScript

var board = document.getElementById('checker-board').childNodes

var usrid = 'rgba(0, 0, 0, '+Math.random()/10+')';
var usrid = 'rgba(0, 0, 0, '+Math.random()/10+')';
var on = true;

function update(){
	for (var i = 1; i <= 64; i+=2) { 
    if (on){
      	board[i].style.backgroundColor =  'rgba(0, 0, 0, '+Math.random()/20+')';
        console.log(usrid);
    } else {
        console.log("true");
    		board[i].style.backgroundColor = 'rgba(0, 0, 0, 0.025)';
    }
	}
  on=!on;
 }
 
 setInterval(update,1000);