JSFiddle - React, Tailwind, and code Playground

HTML

<video poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid" playsinline autoplay muted loop>
	<source src="http://thenewcode.com/assets/videos/polina.webm" type="video/webm">
	<source src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4">
</video>

<div class="header-image-wrapper wrap">
  <h1 class="shadow" style="display: block; color: rgb(255, 255, 255);"></h1>
  <p class="shadow" style="margin-top: 70px;"></p>
</div>

CSS

body {
  margin: 0;
  background: #000;
}

video {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  transform: translateX(-50%) translateY(-50%);
  background: url('//demosthenes.info/assets/images/polina.jpg') no-repeat;
  background-size: cover;
  transition: 1s opacity;
}

JavaScript

document.getElementById('bgvid').addEventListener('playing', myVideoHandler, false);

function myVideoHandler(e) {

  const $this = $('div.header-image-wrapper.wrap h1');
  const $span = $('div.header-image-wrapper.wrap h1 p');
  $this.delay(700)
    .fadeOut(0, () => {
      $this.html('Text000000000000000000');
      $this.css("color", "#fff");
    })
    .fadeIn(500)
    .delay(8500)
    /*.fadeOut(0)
    .fadeIn(500, () => {
        $this.html('Text1111111<br>Text1111111111');
    })
    .delay(5000) */
    .fadeOut(500, () => {
      $this.html('Text222222222');
      $this.css("color", "#fff");
    })
    .fadeIn(500)
    .fadeOut(300, () => {
      $this.html('');
      $this.css("color", "#fff");
    })

}