JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<iframe id="video" class="youtube-player" type="text/html" src="https://www.youtube.com/embed/hE0UioXuqFI" frameborder="0"></iframe>
<div id="overlay"></div>
</body>

CSS

body
{
  background: #000;
}
#overlay {
  position: fixed;
  pointer-events:none;
  background: #000;
  z-index: 50;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
#video {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;  
}

JavaScript

var PHASE_SWAP_CYCLES = 3000;
var phaseSwapCounter = 0;
var blink = false;
function BFI() { 
    window.requestAnimationFrame(BFI); 
    phaseSwapCounter++;
    if (phaseSwapCounter > PHASE_SWAP_CYCLES)
    {
      // Rudimentary anti-burn-in phase swapper.
      // TODO: To fix momentary flicker, do two consecutive 0.5 opacity instead
    	phaseSwapCounter = 0;
    }
    else
    {
      blink = !blink;
    }
    var overlayDiv = document.getElementById('overlay'); 
    overlayDiv.style.visibility = blink ? 'visible' : 'hidden';
} 
BFI();