Donation Alert

DONATIONS
------------

HTML :

<div id="alertHolder">
 	<video id="vid" width="800" height="800" {mute}>
	  <source src="{image}" type="video/webm">
	</video>

	<div id="infoHolder">
		<div class="donation-title">{topText}</div>
    <div class="donation-text">{bottomText}</div>
		<canvas id="canvas" height="80" width="1920" />
	</div>
</div>

------------

CSS :

@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');
html,body{
	padding: 0;
	margin: 0;
	font-family: "Roboto", sans-serif;
	color: #FFF;
}

#alertHolder{
	opacity: 0;
}

.donation-title{
	font-size: 20px;
	position: absolute;
	top: 362px;
	left: 55%;
	transform: translateX(-50%);
}

.donation-text{
	font-size: 20px;
	position: absolute;
	top: 402px;
	left: 56%;
  width: 331px;
	transform: translateX(-50%);
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
  text-align: center;
  padding: 0;
}

#canvas{
    position: absolute;
    top: 380px;
    left: 56%;
    transform: translateX(-50%);
}

------------

JS :

$(document).ready(function() {

  function run() {
    var video = document.getElementById('vid');
    video.addEventListener('loadeddata', function() {
      animate();
    }, false);
    video.load();
  }

  if (!window.scriptLoaded) {
    jQuery.getScript("https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js").done(function() {
			window.scriptLoaded = true;
			run();
    });
  }
  else {
    run();
  }

  var animate = function() {
      var tl = new TimelineMax();
      tl.timeScale(1);
      tl.to( "#alertHolder", 0, {onComplete: playVid, opacity: 1, delay: 0});
      tl.from( "#infoHolder", .2, {delay: 1.8, opacity: 0});
      tl.from( "#infoHolder", .2, {delay: 7.1, opacity: 0});

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

------------

CUSTOM FIELDS EDITOR:

{
    "mute": {
        "label": "Mute custom sounds?",
        "type": "dropdown",
        "options": {
            "muted": "yes",
            "none": "no"
        },
        "value": "none"
    },
    "vidVolume": {
        "label": "Custom Sound Volume",
        "type": "slider",
        "name": "",
        "value": 50,
        "min": 0,
        "max": 100,
        "steps": 1
    },
    "topText": {
        "label": "Subscriber Name",
        "type": "textfield",
        "value": "{name}"
    }
}

------------