A website header displaying sharp images in powerful. Adding a video to your website’s header make your site stand out. The video header option discussed in this article adds a silent video to the top of your website.

Note: Video headers is a Pro plan feature.

This article covers the following:

  • How to add a video header
  • How to add filters to your video header
  • Video formatting
  • How to change or remove a video
  • Commonly asked questions

Video Headers

  1. From the ‘Edit Content’ tab, hover your cursor over the header section, and click the ‘Edit Image’ button
  2. At the top of the setting pane on the left, click ‘Video’
  3. Click ‘Upload Video’

    Note: After clicking ‘Upload’ the video may take a few minutes to process. Please wait for the video to load before leaving the page or making other updates.

  4. Under the ‘Mobile fallback image,’ setting at the left, click ‘Add image’

Notes:

  • The Mobile Fallback Image will display on mobile devices that may not support video autoplay as a power- and data-saving feature.
  • You can upload an image from your computer, select a previously-uploaded image, choose a stock photo from our gallery, or import an image from your Dropbox account.
  1. Toggle ‘Apply to all pages’ if you’d like this video to appear in the header on all pages
  2. Click ‘Save’

To switch back to an image or slideshow of images 1. Click ‘Images’ at the top of the left-hand pane 2. Click ‘Save’

Note: The following themes use the header section as a full-page background, so the video will display as the site background, with content overtop of it:

  • Echo
  • Dusted
  • Cross and Fade

Adding a filter to your video

  1. From the ‘Edit Theme’ tab, click the drop-down under ‘Image filters’
  2. Click the filter name to apply it to the header
    • None: Your original video.
    • Darken: Places a darker hue over the video.
    • Lighten: Boosts the brightness of the video.
    • Grayscale: removes colour and converts to shades of gray.
    • 1977: Adds a faded look and a red tint.
    • Brannan: A high-contrast, high-exposure filter which brightens your video and gives it a yellowish tint.
    • Brooklyn: Brightens your video and boosts yellow tones.
    • Earlybird: Desaturates colors in your video while allowing bright colors to still show. Also adds a sepia tint and vignetting to your video.
    • Gingham: Removes some color from the video, and adds a yellow hue and a brighter exposure.
    • Kelvin: Uses high saturation and a warm tint.
    • Moon: A black and white filter that intensifies shadows.
    • Nashville: High exposure, low contrast, and adds a warm tint.
    • Toaster: Adds a dodged center to your video with a strong red tint and a burnt edge.
    • Walden: Brightens the center of your video and adds an icy blue tint.
    • Xpro2: Bumps up the contrast, adds a strong vignette, and warms all colors. Intensifies shadows, dark elements, and adds a strong vignette.
    • Dots: Adds a layer of tiny dots over your video.
    • Squares: Adds a layer of tiny squares over your video.
    • Custom: Use the filter customization option here to select your custom filter overlay and transparency. (Only available on select templates.)
  3. Click ‘Save’ at the bottom of the settings pane on the left.

Some of our templates also offer filter customizations

  • Next to ‘Image filter custom color’, click the color swatch to change the color and opacity
    • Choose a preset color
    • Select a custom color from the color wheel
    • Enter the hex code for the color you’d like to use
  • Next to ‘Image filter custom mode’, click the image filter name to select the one you’d like
    • Normal: Your video as-is with your custom filter overlay.
    • Multiply: Darkens tones using your custom color.
    • Screen: Brightens the video using your custom color.
    • Overlay: A combination of Multiply and Screen filters.
    • Hard-light: Adds a strong contrast to the video using your custom color.
    • Soft-light: Adds a mild contrast to the video using your custom color.
    • Color burn: Darkens the video using your custom color.

Templates offering filter customizations:

  • Motiv
  • Eclipse
  • Nocturne
  • Encore
  • Spotlight
  • Duet

For more detailed information on filters, please view the ‘Header Image Filters’ help article.

Video Formatting

What type of video file should I use?

  • Your video header must be in MP4, MOV, or AVI format.
  • If you use Windows, you’ll likely upload an MP4 file.
  • If you use a Mac, you’ll likely upload a MOV file.

What size video file should my video header be?

  • Your video file must be under 50MB.
  • Your video should be landscape (horizontal).
  • The video dimensions should be 1920 x 1080 pixels for HD quality.

I have a long music video. How can I use this for a video header? Select a short clip or excerpt from the video that is visually impressive. There’s no audio on video headers, so the clip should be strong visually.

How can I create clips from longer videos?

If you’re on a Windows computer, use any video editor on your computer. Check out this tutorial for more information.

If you’re on a Mac computer you can use iMovie.

If you aren’t sure how to use either of these suggestions, you can upload and edit a clip on Youtube.

Changing or removing a header video

You can change the video header file at any time.

  1. From the ‘Edit Content’ tab, hover your cursor over the header section, and click the ‘Edit Image’ button
  2. At the top of the setting pane on the left, click ‘Change Video’

    Note: After clicking ‘Open’ the video may take a few minutes to process. Please wait for the video to load before leaving the page or making other updates.

  3. Click ‘Save’

Note: We do not store videos, so if you want to change the header in the future, you'd need to upload a video each time, rather than selecting it from a video library.

After a video has been added there is no way to delete it. You have two options:

  • Replace it with a new video
  • Click ‘Image’ in the left-hand pane to switch back to displaying an image or slideshow instead.

Note: It’s not possible to delete all images. You must have at least one image or a video in the header area.

Commonly Asked Questions

Can I use a video from YouTube? Videos have to be uploaded directly to our system, so it's not possible to embed a video hosted on YouTube or any other streaming service.

What is the maximum file size I can upload? Videos up to 50MB can be used as a video header.

How long can my video be? There’s no time limit on videos - as long as the file is 50MB and under, it can be uploaded to the header.

How can I set different video headers on different pages? Only one video can be added, and it will be applied site-wide. You can, however, have different static images on different pages of your website.

Can I upload a video from my phone or mobile device? Yes, you can upload a video directly from your iPhone, iPad, or Android device - as long as it's a compatible file type under the size limit.

Can I reposition my video header and drag and drop into place, or change the display for mobile vs. desktop devices? There’s not an option to drag or reposition the video header, or customize the framing display for mobile devices for header videos.

What does "processing" mean? The “Processing” message means that the upload has completed, and the video file is now being encoded into a format to be display nicely across all web browsers. This step shouldn't take too long, but if you're on a slower connection or have uploaded a larger file, it may take a bit of time.

Why is there no sound? The video background does not play audio - it's only visual. Use a Music feature in the content area of your site to add audio for visitors.

Why isn’t my video header working on mobile? Video headers are supported on the most recent version of iOS and Android software. If the video header is not playing on a mobile device, these issues may be the cause:

  • Using an operating system that is out of date. To check for an update, read this tutorial on Android devices or this one for iOS products, like iPad or iPhones.
  • Chrome’s "Data Saver" setting may be enabled for mobile devices. You can read more on the Data Saver feature here. To disable the setting follow these steps: Open Chrome on your Android or iOS device. Select the three-dot icon in the top right corner, and choose ‘Settings’. Select ‘Data Saver’. There should then be a toggle in the top right corner for it, and the video header should play without an issue.