ATA Intro Video

NOTE: Due to web standards - the video cannot autoplay with sound on initial landing on the site. It will be muted. However - if you user navigates from one ATA page back to the homepage - it will play with sound. The alternative solution to this would be adding a "Play" button (and probably a "Skip" button) here - in which case - if the user clicks the "Play" button we could have it with sound.

There are two Custom Code snippets that are responsible for this animated splash ATA intro video:

• ATA Intro Video - CSS (head)
• ATA Intro Video - HTML (body - end)

These scripts are only loaded into the homepage.

ATA Intro Video

#Backup Code Copies

ATA Intro Video - CSS

<style>
#IntroVideo {
  position: fixed; // absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 99999999;
  transition: opacity 1s;
}

#IntroVideoElem {
  margin: 0 auto;
  width: 100%;
  height: 100vh;
  min-height: 100%;
}
</style>

ATA Intro Video - HTML

<div id="IntroVideo">
  <video id="IntroVideoElem" preload="metadata" playsinline autoplay muted>
  	<source src="https://video.wixstatic.com/video/d2a457_4e9e1a4e8b4f4b78a209567be237104b/1080p/mp4/file.mp4" type="video/mp4" />
  </video>
</div>

<script>
	document.getElementById('IntroVideoElem').addEventListener('ended',introVideoEnded,false);
	document.getElementById('IntroVideo').addEventListener('transitionend',introVideoFaded,false);

	function introVideoEnded(e) {
    // What you want to do after the event
		var introVideo = document.querySelector('#IntroVideo');
		introVideo.style.opacity = 0;
  }

	function introVideoFaded(e) {
		var introVideo = document.querySelector('#IntroVideo');
		setTimeout( introVideo.parentNode.removeChild(introVideo) , 3000);

	}

</script>