Video Block

The Video Block component lets you add a video background with different sources for mobile and desktop, and overlay headings/links.

What is the Video Block component?

The Video Block component lets you add a video as a background, with different sources for mobile and desktop. You can overlay headings and links, similar to a custom banner. Videos should be hosted at a URL, compressed, and no greater than 2MB.

Open the CMS editor where you want to add or edit a Video Block component.

Drag the Video Block component onto your page.

Enter the video URLs for desktop and mobile backgrounds.

Add headings, links, or other content to display over the video.

Save your changes in the editor.

Video Block Component Settings

All Video Block components support the standard CMS settings below. Use these tabs to control layout, typography, and display for your video block:

Settings

Sub heading

Add a sub heading to the banner.

Sub heading classes

In this box you can add classes that are defined elsewhere on the site to a specific place.

Heading

Set the text in heading.

Intro text

Add intro text to the banner.

CTA Text

Set the text in the call to action button.

CTA URL

Set the URL for the call to action button. For pages on the same site use a relative URL (e.g., /about-us). For external sites use the full URL (e.g., https://www.example.com).

Button Style

Choose the style of the CTA button: primary (default), secondary etc.

Video URL (Mobile)

Enter the URL of the video to be used as the background on mobile devices. This can be a different video optimized for mobile viewing.

Video URL (Desktop)

Enter the URL of the video to be used as the background on desktop devices. The video should be in a web-compatible format (e.g., MP4) and optimized for web use.

Show text

Toggle to show or hide the overlay text on the video block.

Poster Image

Upload the image to be used as the poster for desktop devices. This can be done by clicking and selecting a file, dragging a file to the box or choosing load asset and using an already uploaded image from the data and assets manager.

Video Mobile

Upload the image to be used on mobile devices. This can be done by clicking and selecting a file, dragging a file to the box or choosing load asset and using an already uploaded image from the data and assets manager.

General

cms general

Selectors

In this box you can add classes that are defined elsewhere on the site to a specific page.

ID

ID is used to direct user to an element of the page or identify it for future use, so you can link to this aspect of the page.

Styles

Styles are used to add a specific style not predefined in a class. You can add style settings which can be applied against any component. Below are a list of styles you can add:

Margin (either just "margin:" or specific sides of a component like "margin-top:" or "margin-left:")
Padding (either just "padding:" or specific sides of a component like "padding-top:" or "padding-left:")
Max Width
Font
Border
ID

Examples:

max-width: 352px!important;
margin-bottom: 0 auto;
padding-top: 30px;

To center an image: margin:auto; To center text/markdown: text-align: center; To make a component go edge-to-edge: margin-left:-15px;margin-right:-15px