<div id="alert-text-wrap">

  <!-- alert text -->
  <div id="alert-text">

    <!-- alert message -->
    <!-- messageTemplate will be replaced with your message template -->
    <!-- for example : {name} is now following! or {name} donated {amount} -->
    <div id="alert-message">{messageTemplate}</div>
    <div id="alert-user-message">{userMessage}</div>


  </div>

</div>
<style>
#vid {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
#textContainer{
  position: absolute;
  left: 0;
  top: 495px;
  width: 100%;
  z-index: 99;
}
#name {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  text-shadow: 2px 2px 6px #000, #e27beb 0 0 40px,#e27beb 0 0 60px;
  z-index: 9;
}
#nameShadow {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  color: rgba(0,0,0,0);
  text-shadow: #e27beb 0 0 80px, #e27beb 0 0 100px, #e27beb 0 0 110px, #e27beb 0 0 120px;
  z-index: 1;
}
</style>
<div id="notificationHolder">
  <div id="textContainer">
      <div id="name">{name}</div>
      <div id="nameShadow">{name}</div>
  </div>

  <video autoplay preload id="vid" width="800" height="800">
      <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.from("#textContainer", 4, {y: "+=30"}, "-=.1");
  tl.to("#nameShadow", 2.5, {opacity: 0}, "-=4");
  tl.to("#textContainer", 1, {opacity: 0, delay: 2.25});

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

}

run();

}());
</script>