All Collections
Home page video backgrounds
Home page video backgrounds

How to add a background video banner to your website homepage

Cam Langsford avatar
Written by Cam Langsford
Updated over a week ago

With your Training Tilt website, you can use either background images for your home page banner or you can use a background video.

If you use a background video the responsive website will attempt to centre the video based on the website visitors screen size, therefore it's important to use a video that has the important elements centred with ample space around the outer sections of the video. This will ensure the video will be able to be viewed properly in all screen sizes.

Important Note: On mobile devices where users may have limited bandwidth the video will be replaced with one of your banner images instead. This is standard behaviour as a courtesy to the website user to save their data typically served over a mobile network.

To change/update the banner video, go to Admin then click on "Platform Settings".

Now click on Carousel and Login Images.  Note that there are two different locations to click on.

Next, scroll through the options you currently have and confirm that the video you want to upload is not there.  If it isn't, click on Configure background video.

You must use a video hosted on a video platform like Vimeo or Youtube. You can control the video settings using the video platforms own parameters. Ensure that you use the embeddable Youttube and Vimeo links not the links you use to browse the video in a browser. The formats are shown below, you just need to replace the bolded text with the id of the video you will use.

eg for the Vimeo video in the example below autoplay=1 makes the video start playing automatically and loop=1 makes the video continuously loop.

You can learn more about Vimeo embedded videos here

For a Youtube video the autoplay=1 makes the video start playing automatically and loop=1 makes the video continuously loop.

You can learn more about Youtube embedded videos here.

See the documentation from your video providers for a full set of options. Note: it's recommended to have a video without sound as the background video to ensure your home page is not too intrusive to the user's experience. eg if they are at work they probably don't want video audio playing automatically. You can either mute your video in the video file itself or control it by your video providers settings.

You can also add a text overlay and a call to action button if you want your visitors to perform an action or go do one of your pages.

When finished, click Save.

Did this answer your question?