JSFiddle - React, Tailwind, and code Playground

by Dejan Munjiza

HTML

<section id="big-video">
   <div class="video" data-video="http://ensconce-wp.webfactoryltd.com/wp-content/themes/ensconce/images/ny-traffic.mp4">
      <video autoplay="" loop="">
         <source src="http://ensconce-wp.webfactoryltd.com/wp-content/themes/ensconce/images/ny-traffic.mp4" type="video/mp4">
         <source src="http://ensconce-wp.webfactoryltd.com/wp-content/themes/ensconce/images/ny-traffic.ogg">
         Your browser does not support the HTML5 video tag. Please upgrade it.
      </video>
   </div>
   <div class="overlay">	
Sed in bibendum leo. Aenean vestibulum aliquet interdum. Nunc vel semper sem, malesuada hendrerit mauris. In feugiat mattis blandit. In sagittis tincidunt augue a dignissim. Nam eu ligula vel ante dapibus dignissim sit amet eget tortor. Vestibulum metus tortor, laoreet eu mi at, tristique condimentum tellus.
   </div>

</section>

CSS

.overlay {
    position: absolute; 
    left: 0; 
    top: 50%;
    background: rgba(0, 0, 0, 0.32); 
    color: white; 
    font-weight: bold;
    font-family: Arial;
}