Contact Form Video Background

There are two Custom Code snippets that are responsible for this video background on the contact form:

• Contact Video Background - CSS (head)
• Contact Video Background - JS (body - start)

These scripts are only loaded into the homepage.

ATA Intro Video

#Backup Code Copies

ATA Intro Video - CSS

<style>
  #contactVideoBackground {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: 0;
  }

  [data-testid="responsive-container-content"] {
    z-index: 1;
  }
</style>

ATA Intro Video - HTML

<script>
// Create video element
const videoBackground = document.createElement('video');

// Use local file
// video.src = 'video.mp4';

videoBackground.id = "contactVideoBackground";

// Use remote file
videoBackground.src =
  'https://video.wixstatic.com/video/d2a457_d19f572228424141b1f159a00acfe062/1080p/mp4/file.mp4';


  videoBackground.controls = false;
  videoBackground.autoplay = true;
  videoBackground.muted = true;;
  videoBackground.loop = true;;

const overflowContainers = document.querySelectorAll("[data-testid='responsive-container-overflow']")
var last = overflowContainers[overflowContainers.length- 1];

// Include in HTML as child of #box
last.appendChild(videoBackground);
</script>