JSFiddle - React, Tailwind, and code Playground

by darkylmnx

HTML

<div class="parent">
  <video src="https://openings.moe/video/Utawarerumono%EF%BC%9AItsuwariNoKamen-OP01-NCOLD.webm" controls></video>
</div>

CSS

.parent {
  border: 10px solid #000;
  position: relative;
  width: 480px;
  height: 270px;
}

video {
  display: block;
  width: 100%;
  height: 100%;
}

JavaScript

var _parent = document.querySelector('.parent');
var _video = _parent.children[0];
var _text = document.createElement('p');

_text.textContent = 'Hello';
_text.style.background = '#000';
_text.style.fontSize = '76px';
_text.style.position = 'absolute';
_text.style.top = '10px';
_text.style.right = '10px';
_text.style.color = '#fff';

_video.addEventListener('timeupdate', function() {
	console.log('helo')
	if (this.currentTime > 10) {
  	// after 10 secs, show name on screen
    _parent.appendChild(_text);
  }
})