Skip to main content

Adding a video background to a Title Page (Legacy Editor)

Updated

You can add a short video clip (maximum 15MB file size) to the background of a Title Page template, and set it to loop.

This article references the process of creating Title Pages using our legacy editor. We have since updated the process of creating title pages, by introducing Flexible Title Pages. Flexible Title Pages allow you to create entirely custom Title Pages from scratch. If you are creating a brand-new Title Page, we'd recommend you view our Creating Flexible Title Pages article instead.

The video file does not need to be hosted by YouTube or Vimeo; you can directly upload from your device or from Dropbox.

The audio component of any background video will not be included, as many browsers will not play video automatically with audio included.

The limit of 15MB has been set to ensure that the video loads quickly across all devices and networks (WIFI, Cellular data, etc.)

Only .mp4 or .mov files can be uploaded.

See our guide here for ideas on trimming video that is too large or not optimized.

Select a Video background Title Page template

There are two Title Page templates that you can add your video background to.

  1. Create a Custom Page > Title Page (see our guide here if you haven't made a Custom Page before)

  2. Select the second template from the top left with the video thumbnail playing or

  3. Another video template with Title, Description, and an Entry Button!

Video Title Page editor overview

  1. Notification of video background

  2. Click the background to bring up options 3 & 4.

  3. Add Background Video

  4. Customize Design settings

  5. Text link that needs to be set to link to a page

  6. Unconnected Links warning displayed

  7. Save Changes

Upload a video file

  1. Drag & Drop a video file 15MB or under, or click 'Upload Video'

  2. Import from Dropbox

  3. Reminder that video file must be 15MB or under and .mp4 or .mov file type

Video upload progress

  1. Video filename

  2. Uploading size and status

  3. Progress and time remaining indicator

Save Changes Warning

  1. Clicking Save Changes without linking shows a Warning

  2. 'Go Back and Connect Links', recommended

  3. 'Save without Links' is not recommended!

Select and edit text

  1. Replace text with your own and select all text

  2. Click 'Link'

Create Link to Page

  1. Select 'Page'

  2. Use the 'Choose a page' dropdown

  3. Select Page

Save Changes

The orange warning panel at the bottom will no longer appear

  1. The link has been set

  2. Save Changes

Customize Design

  1. Click 'Customize Design'

Customize Title Page panel

Changes made to are specific to this Title Page (you can have multiple Title Pages within a Format site used for different purposes.

  1. Changes that you make in the left panel are reflected in the in-app preview

Preview in Live Site

View your live site across a range of devices and screen sizes to ensure you are happy with the way the video is displaying.

Make any changes you feel necessary.

Auto-Play not Auto-Playing?

If a web browser's preferences have been set to disable the auto-playing of videos (Never Auto-Play) then the video will not auto-play and will appear as a fixed image.

The default 'Stop Media with Sound' would still allow the video to play.

Each browser's settings may be different, but the screenshot below is for macOS Safari.

  1. macOS Safari > Preferences > Websites tab

  2. Click 'Auto-Play

  3. When visiting other websites, select 'Allow All Auto-Play'

Also, try testing in another browser or device if you are not seeing the video auto-play.

Still have questions? Reach us on our live chat or email us at info@format.com. We’re here to help!

Related to

Related articles