JSFiddle - React, Tailwind, and code Playground

HTML

<iframe id="YTFrame" width="560" height="315" src="https://www.youtube.com/embed/eEkq7ZQDw9A" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<pre id="_log"></pre>

CSS

#_log {
  border: 1px solid;
  max-height: 100px;
  overflow: auto;
}

JavaScript

document.onkeydown = e => {
	e.preventDefault();
	log(new Date().getTime(), e.key);
}

onblur = e => {
	focus(); // FF
  setTimeout(focus, 20); // Chrome
};


function log(...vals) {
	_log.textContent += vals.join(', ') + '\n';
  _log.scrollTop = _log.scrollHeight;
}