<style>
@import url('https://fonts.googleapis.com/css?family=Teko:700');
html,body{
  padding: 0;
  margin: 0;
  text-align: center;
  color: #FFF;
  font-family: "BigNoodleTitling", 'Teko', sans-serf;
  font-size: 96px;
}

#notificationHolder {
  opacity: 0;
}
#vid {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
#textContainer{
  position: absolute;
  left: 0;
  top: 180px;
  width: 100%;
  z-index: 99;
}
#name {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  text-shadow: 2px 2px 6px #000, #9b40b2 0 0 40px,#9b40b2 0 0 60px;
  z-index: 9;
}
#nameShadow {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  color: rgba(0,0,0,0);
  text-shadow: #9b40b2 0 0 80px, #9b40b2 0 0 100px, #9b40b2 0 0 110px, #9b40b2 0 0 120px;
  z-index: 1;
}

.amount{
  color: #cec9ff;
}
#message {
  position: absolute;
  top: 358px;
  width: 800px;
  left: 50%;
  transform: translateX(-50%);
  color: #ffce6a;
  font-size: 28px;
  color: #FFF;
  text-shadow: #000 0 0 2px, #000 2px 2px 4px;
}

</style>
<div id="notificationHolder">
  <div id="textContainer">
      <div id="name">{name} <span class="amount">{amount}</span></div>
      <div id="nameShadow">{name} <span class="amount">{amount}</span></div>
      <div id="message">{message}</div>
  </div>

  <video id="vid" width="800" height="600">
      <source src="{image}" type="video/webm">
  </video>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js"></script>
<script>
(function () {

function loadVideo (element) {
  return new Promise(resolve => {
    const go = () => {
      if (element.readyState >= 3) {
        resolve()
      }
    }

    element.addEventListener('loadeddata', go)
    element.load()

    go();
  })
}

function run() {

  const mainVideo = document.querySelector('#vid')

  Promise.all([
    loadVideo(mainVideo)
  ]).then(() => {
    console.log('loaded')
  }).then(animate)

}

var animate = function() {
  var tl = new TimelineMax();
  tl.timeScale(1);

  tl.to("#notificationHolder", .1, {opacity: 1, delay: .2, onComplete: playVid});
  tl.from("#textContainer", .1, {opacity: 0, delay: 3.5});
  tl.to("#nameShadow", 2.5, {opacity: 0}, "-=4");
  tl.from("#message", .1, {opacity: 0, delay: 1});
  tl.to("#textContainer", 1, {opacity: 0, delay: 4.25});

  function playVid() {
    var vid = document.getElementById("vid");
    vid.volume = 0;
    vid.play();
  }

}

run();

}());
</script>