JSFiddle - React, Tailwind, and code Playground

by David Underwood

HTML

<div class="videoPreview">
  <img class="mediaThumbnail" src="https://embed-ssl.wistia.com/deliveries/24877450e3ce79cdf8026cc5dc15b590fbdaae0f.jpg?image_crop_resized=956x538" />
  
  <div class="overlay">
  </div>
  <div class="overlayMessage">
    <p>
      You must enter your details to view this video.<br>
      Please fill out the form below.
    </p>
  </div>
  <img src="http://www.clipartbest.com/cliparts/4T9/od4/4T9od4dqc.png" class="playButton" />
  
</div>
<div id="videoForm">
  <form action="/learn/demo-video-1/" enctype="multipart/form-data" method="post" novalidate="novalidate"><input name="__RequestVerificationToken" type="hidden" value="jAAmznm6_K362bF_IJyPRBqxYVUjaDeypuIIOqm1RNAWZCDlVtlpxFqpBY6JoyHDknr3ax3TUp2denEDIqyafu78vZBHYWwANnw6IukmUmU1"><input data-val="true" data-val-required="The VideoGuid field is required." id="VideoGuid" name="VideoGuid" type="hidden" value="6ba9c011-542b-479d-92fd-c066b425fe11"><input length="110" id="ThumbnailUrl" name="ThumbnailUrl" type="hidden" value="https://embed-ssl.wistia.com/deliveries/24877450e3ce79cdf8026cc5dc15b590fbdaae0f.jpg?image_crop_resized=100x60"><input id="ViewedByName" name="ViewedByName" placeholder="Your Name" type="text" value=""><span class="field-validation-valid" data-valmsg-for="ViewedByName" data-valmsg-replace="true"></span><input data-val="true" data-val-required="Email Address is required." id="ViewedByEMail" name="ViewedByEMail" placeholder="Email Address" type="text" value=""><span class="field-validation-valid" data-valmsg-for="ViewedByEMail" data-valmsg-replace="true"></span>        <input type="submit" value="View Video">
<input name="ufprt" type="hidden"...

CSS

div.videoPreview {
  width: 956px;
  height: 538px;
  text-align: center;
  position: relative;
  z-index: 1;
  clear: both;
}

img.playButton {
  z-index:2;
  margin:auto;
  position:absolute;
  left:0;
  right:0;
  top: 30%;
  height: 40%;
}

div.overlay {
    background-color: #000;
    position: absolute;
    height: 538px;
    width: 956px;
    opacity: 0.65;
    color: #FFF;
    z-index: 3;
    top: 0px;
}

div.overlayMessage {
    position: absolute;
    height: 538px;
    width: 956px;
    padding-top:200px;
    z-index: 4;
    color: #fff;
    top:0;
    font-family: Arial;
    font-size: 22px;
    font-weight: bold;
    line-height: 40px;
}

#videoForm span {
  padding-left: 10px;
}

#videoForm {
    position: absolute;
    height: 100px;
    width: 956px;
    color: #fff;
    top: 320px;
    z-index: 5;
    text-align: center;
}