Use a Video Background on Website Pages

This feature is available after the September 2026 release in your region.

You can use the OC Featured Background page to display a video as a background for your pages. When a video is in the background of the homepage (depending on your theme setup) or content pages, the video sits behind the content and will play silently in a loop.

The Featured Background page can use a Vimeo link, or a media file uploaded to the Files Library. You can also set a fallback image that will display in the video doesn't load or cannot play. Site visitors will see a Play/Pause button to stop the playback.

This article details how to display a video as your page background. For information about adding videos into your page content, please see:

• Using the video widget in a Theme Layout
• Embedding videos into your content pages

Add a Video Featured Background

To add a video background to your site:

1. Go to Pages and right-click in the site tree where you want to create the background page. If the Featured Background is for your homepage, then there may be a Featured Background folder under Home.
2. Select Create Page and choose the OC Featured Background content type.
   
3. Fill in the page fields and Publish your page.

Featured Background Fields

The OC Featured Background has these fields:

• Page name: Completes the unique page URL.
• Choose where to show featured background (skips OC Folder pages): Choose which pages will display the image or video:
  • On page page and its child pages: Apply this background to the parent page of this OC Featured Background page and all its child pages. Use this option if all pages within a section need to show this Featured Background. Child pages take their background image from their closest parent page.
  • On parent page only: Apply this background only to the direct parent page of the OC Featured Background.
• Choose image or video (vimeo url or video file) for the background: Choose if you want to display an Image or a Video as the Featured Background.
  
• Add a background image (also used as fallback image for video backgrounds): Choose an image to display if you have chosen Image and to use as a fallback for the scenario in which the video doesn't load or cannot play. Select Add Image and navigate through the Files Library to the image you want to use. The best dimensions for a background image vary, but we recommend using an image as least 2000 px wide with no clear focal point.
• Add background colour code: Add a hexidecimal color code for the background of the page. This color is used when pages extend beyond the height of the image or video.
• Fade from image/video to solid color when the media is shorter than the page: Check Yes if you want to gradually fade from the image to your background color when a page is longer than the image.
  • Note: If you've made custom CSS changes to the background image feature, this setting might not work as expected.
• Add homepage background message: Add text to be displayed over the homepage image or video. This could be a welcome message or a tagline for your city or council. This option does not apply to Featured Background pages used on content pages.
• Add link URL: Add a link to your homepage background message by selecting Insert links and using the Select an internal link icon to navigate to an internal page. This option does not apply to Featured Background pages used on content pages.
• Video URL: Select Insert links to add a Vimeo URL or file link. Paste the Vimeo URL into the Link URL field and add the video title into the Link Text field or use the content selector to select a video from your Files Library, then select Save. The Link Text field does not display when the video plays on your live site.
• On Mobile: play background video or show the fallback image: Choose to Play video or Use fallback image when the site is visited on a mobile device. The fallback image is the image specified in the Add background image field.
  

Background Video Behavior

Users with the OC Site Designer role can choose how Featured Background images and videos appear on the screen in Themes Management > your theme > Styles > Template > General. The Background video display field will allow you to select:

• Fit to width: The video will display as wide as the screen and sit at the top of the page. If the content is taller than the video height, the area below the video will show the Website background color (including a fade, if applied). The fallback image will not display in the excess page area is the video is available.
• Stay in view while scrolling: The video will stay in view of the user as they scroll down the page.

When a user lands on a page with the video background, the video will load and start playing automatically. The playback is silent and will loop endlessly while the user is on the page or scrolls down past the video boundary. Users will be able to use the Play/Pause button to control the playback.

The video will not play when:

• You have set the Choose image or video (vimeo url or video file) for the background field as Image.
• The site visitor has low internet speed, has set their browser to reduce motion, or the browser is in data-saving mode. In this scenario, a fallback image is shown, or a background color if no image is set.
• The site visitor is using a mobile device and you have the On Mobile: play background video or show the fallback image setting to Use fallback image.
• The video you have selected in the Files Library is unpublished or otherwise unavailable.
• The Vimeo URL is incorrect, the video has been removed from Vimeo, or the video is password-protected or set to private on Vimeo.