HTML example:
<!-- Header-Area-Start -->
<header class="header-area parallax-bg" id="home-page">
<div id="header-video">
<iframe id="video" src="https://www.youtube-nocookie.com/embed/El4OCwR6qxo?vq=hd1080&autoplay=1&loop=1&modestbranding=1&showinfo=0&rel=0&theme=light&fs=0&color=white&autohide=0&controls=0&disablekb=1&rel=0&enablejsapi=1" width="1920" height="1080" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="header-text">
<h3 class="typer-title wow fadeInUp" data-wow-delay="0.2s">I'm ui/ux designer</h3>
<h1 class="title wow fadeInUp" data-wow-delay="0.3s" >Hi, I am Nik Smith</h1>
<div class="desc wow fadeInUp" data-wow-delay="0.4s" >
<p>Still top of and the drops. What don't issued character god, no ports, credit question and curse casting problem will the one could apply.</p>
</div>
<a href="#" class="button-dark mouse-dir wow fadeInUp" data-wow-delay="0.5s" >Hire Me <span class="dir-part"></span></a>
</div>
</div>
</div>
</div>
<div class="play-buttons">
<button class="play-button" id="play-button" type="button"><i class="fa fa-play"></i></button>
<button class="pause-button" id="pause-button" type="button"><i class="fa fa-pause"></i></button>
</div>
</header>
<!-- Header-Area-End -->