Video Background

Overview

Using background videos are a great way to create a unique, dynamic experience to your site. By default, the videos loop and are muted.

How To Use

To add a video background to your page you must do the following:

• Upload your background video files to the Uploads Library
• Add the Vide JavaScript plugin to your footer inject code
• Initialize on an element with your video file URLs

File formats needed for the video include:

• .mp4
• .ogv
• .webm
• .jpg, .png, or .gif (to add a poster)

Add Vide Plugin

Add the Vide plugin code to the Footer Inject. We recommend using a CDN to enhance load times.

<script src="https://cdnjs.cloudflare.com/ajax/libs/vide/0.5.1/jquery.vide.min.js"></script>

Initialize

You can use any class name or ID to attach the video background to. Use '.page-slug .bg' to target the hero section on a specific page, changing page-slug to match the desired page on your website.

Then, set each file format with the URL paths of the video files you uploaded to your Uploads Library and set the posterType to the same file extension as set for the poster URL.

$('.page-slug .bg').vide({
 mp4: 'mp4_URL',
 webm: 'webm_URL',
 ogv: 'ogv_URL',
 poster: 'poster_URL',
}, { posterType: 'jpg or png' });