Ink Blot Modal Using Video & Blend Modes

external call

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js

index.html

<div class='container'>
  <div class='wrap'>
    <div id='bg'>
      <img class='a' src='https://wallpapertag.com/wallpaper/full/a/d/c/49949-steampunk-background-5000x2801-mobile.jpg'>
    </div>
    <video data-depth='50' height='540' id='myVideo' width='620'>
      <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/ink4.mp4" type="video/mp4">
    </video>
    <img class='b' src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/clockwork.png'>
    <div class='wrap_inner'>
      <div class='container_inner'>
        <h1>The inkblot modal</h1>
        <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/trill.png'>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ulla</p>
        <a>confirm</a>
      </div>
    </div>
  </div>
</div>
<div class='button'>Open the modal</div>

script.js

var vid = document.getElementById("myVideo"); 

function playVid() { 
    vid.play(); 
} 

$('.button').click(function(){
    $(this).fadeOut(500);

    setTimeout(function(){
        playVid();
    },800);
 
    setTimeout(function(){
        $('h1,.container_inner img,a').css('opacity','1');
        $('p').css('opacity','.6');
    },1700);
});

style.css

@font-face {
  font-family: 'Princess';
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/PrincesSANDTHEFROG.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
body {
  margin: 0;
  font-family: 'Princess';
  height: 100vh;
  overflow: hidden;
}
body .container {
  height: 0px;
  left: 0;
  position: absolute;
  right: 0;
  margin: auto;
}
body .container .wrap {
  background: white;
  position: absolute;
  height: 100vh;
  width: 100%;
}
body .container video {
  mix-blend-mode: multiply;
  top: calc(50% + 40px);
  position: absolute;
  left: 0;
  width: 940px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 0;
  margin: auto;
}
body .container img.a {
  position: absolute;
  top: 0;
  width: 100%;
  left: 0;
  z-index: 0;
}
body .container img.b {
  position: absolute;
  mix-blend-mode: exclusion;
  width: 640px;
  top: calc(50% - 40px);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}
body .container_inner {
  mix-blend-mode: lighten;
}
body .container_inner h1 {
  color: white;
  font-weight: normal;
  font-size: 15px;
  opacity: 0;
  -webkit-transition: all 0.8s 0.2s;
  transition: all 0.8s 0.2s;
}
body .container_inner p {
  color: white;
  opacity: 0.6;
  line-height: 18px;
  font-size: 9px;
  margin: 16px 0;
  opacity: 0;
  -webkit-transition: all 0.8s 0.4s;
  transition: all 0.8s 0.4s;
}
body .container_inner img {
  opacity: 0;
  -webkit-transition: all 0.8s 0.3s;
  transition: all 0.8s 0.3s;
}
body .container_inner a {
  color: white;
  font-size: 12px;
  border-bottom: 1px solid white;
  opacity: 0;
  -webkit-transition: all 0.8s 0.5s;
  transition: all 0.8s 0.5s;
}
body .container .wrap_inner {
  position: absolute;
  top: calc(50%);
  text-align: center;
  position: absolute;
  left: -69px;
  right: 0;
  mix-blend-mode: screen;
  margin: auto;
  width: 280px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.button {
  position: absolute;
  z-index: 3;
  color: white;
  background: rgba(61, 21, 24, 0.54);
  display: block;
  width: 132px;
  text-align: center;
  border-radius: 2px;
  top: 50%;
  padding: 13px;
  right: 0;
  margin: auto;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  font-size: 12px;
  left: -90px;
  cursor: pointer;
  -webkit-transition: background .7s;
  transition: background .7s;
}
.button:hover {
  background: #3d1518;
}

/* YAY CSS TRICKS! */
img.a {
  position: fixed;
  top: 0;
  left: 0;
  /* Preserve aspet ratio */
  min-width: 100%;
  min-height: 100%;
}

#bg {
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
}

#bg img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  min-width: 50%;
  min-height: 50%;
}

as seen here https://codepen.io/jcoulterdesign/pen/QagxgJ/