JSFiddle - React, Tailwind, and code Playground

HTML

<video autoplay="" loop="" poster="http://artbees.net/themes/jupiter-demo/wp-content/uploads/2013/10/home-vid-img.jpg" rel="nofollow" id="bgvid">
    <source src="http://artbees.net/themes/jupiter-demo/wp-content/uploads/2013/10/homepage.webm" rel="nofollow" type="video/webm">
        <source src="http://artbees.net/themes/jupiter-demo/wp-content/uploads/2013/10/shutterstock_v3702740_4.m4v" rel="nofollow" type="video/mp4">
</video>
        
<div class="overlay">
    <h1>APO-UCOZ.COM</h1>
    <p>Только лучшие скрипты для вашего сайта</p>
    <p>Всем добра!</p>
</div>

CSS

video {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    background-size: cover;
}

.overlay {
  width: 400px;
  height: 400px;
  background: rgba(0,0,0,0.3);
  display: block;
  position: absolute;
  top: 30%;
  left: 35%;
}

.overlay h1 {
  text-align: center;
  padding-top: 100px;
  color: #fff;
  font-family: inherit;
}

.overlay p{
  text-align: center;
  width: 80%;
  margin: 0 auto;
  color: #fff;
  font-family: inherit;
  margin-bottom: 20px;
}

.overlay a {
  color: #fff;
}