All Collections
Editing Your Site
Add a Video Background Header
Add a Video Background Header

This guide shows you how to add a video background to a page

Daniel Barake avatar
Written by Daniel Barake
Updated over a week ago

There are to ways two ways to add a video background to the header of a page. You can use an mp4 video file or a Youtube/Vimeo link. Before getting started, make sure to not remove the main header image of the page. The page always needs a fall back image to default to if for some reason it is not able to display the video

Here are the steps to find the "video as header" section:
โ€‹


Step 1: edit the page and expand the Page Header Section:

Step 2: Flip to the options tab and find the header video embed section:

Option 1 - Upload the MP4 file

  • Find the "Header Video MP4" section add click "add file"

  • drop the file and select it. Note: Your video file cannot exceed 15 MB in size. if it does, you can use a video compressor to compress the video to the right size. here is one that we use: https://www.freeconvert.com/video-compressor ( you can click the settings wheel and set the target mb size to be under 15 Mb.)
    โ€‹

  • Once selected. save the page.

Option 2 Use a Youtube Video

Using a youtube link for a website background is very easy. keep in mind that when using a youtube video link, it will not display the video on mobile if using the theme default header type. it will default to your main header image. that said, it will work if using the "inline header" type.

Find the url section.

Add the Youtube/vimeo link and Save


Video Header Types

Theme default: This will add the video under the title and header text.

Inline Media: This option adds the video below the header text, this is a great option if you don't want the video to crop as the screen size decreases.

Did this answer your question?