The Video Billboard component highlights key content at the top of your webpage over an engaging looping video background. It includes options that allow authors to adjust layout size, text color and size, content alignment, and vertical spacing to suit various design needs. This component should be reserved exclusively for special pages, such as marketing campaign landing pages or featured story pages, where capturing visitor attention is essential.
This is a Page Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
This is a Page Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Content Options
- Background Video Kaltura ID: Required field where authors input the ID of the looping background video from Kaltura.
- Hide Image on Mobile: Option to turn off the video background on mobile devices for performance or accessibility reasons.
- Enable Breadcrumbs: Toggle switch to show or hide breadcrumbs at the top of the component.
- Pre Heading: Optional short line of text that appears above the main page title.
- Page Title: Required heading that serves as the primary title for the page.
- Intro Text: Optional paragraph for a short introduction or supporting context below the title.
- Phone Number: Optional phone number that can appear as part of the call to action.
- Inline Text: Optional text that can appear after the phone number.
- CTA Type: Dropdown to select the type of call to action, button or plain text.
- Button:
- Button Text: Label that appears on the call to action button.
- Button Link: URL that the button directs to when clicked.
- Button Anchor: Optional field to specify a page anchor if the button should scroll to a section on the same page.
- Button Target: Dropdown to choose whether the link opens in the same window or a new one.
- Plain Text:
- Plain Text CTA: Create a plain text call to action.
- Button:
Layout and Styling Options
- Size: Controls the amount of top and bottom padding around the component. Options include small, medium, and large.
- Content Width: Allows authors to adjust how wide the content area should be within the component, using a percentage slider.
- Content Alignment: Sets the horizontal alignment of the text content within the component. Options include left, center, and right.
- Invert Text Color: When turned on, all text is displayed in white (default). When turned off, color controls for individual text elements become available.
- Pre Heading, Page Title, and Intro Text Colors: Dropdowns appear when “Invert Text Color” is off, allowing authors to set each item to black or red.
- Text Size Controls: Authors can select small, medium, or large sizes individually for the pre heading, page title, and intro text.
Size
Size: X-Small
Size: X-Small
Size: Small
Size: Small
Size: Medium
Size: Medium
Size: Large
Size: Large
Size: X-Large
Size: X-Large
Size: Flush
Size: Flush
Content Width
Content width: 40%
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Content width: 40%
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Content width: 60%
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Content width: 60%
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Content width: 80%
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Content width: 80%
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Content width: 100%
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Content width: 100%
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Content Alignment
Content alignment: Left
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Content alignment: Left
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Content alignment: Center
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Content alignment: Center
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Content alignment: Right
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Content alignment: Right
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Text Color
Text Color: White
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Text Color: White
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Text Color: Black
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Text Color: Black
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Text Color: Primary
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Text Color: Primary
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Text Color: Secondary
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Text Color: Secondary
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Text Size
Text Size: Small
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Text Size: Small
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Text Size: Medium
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Text Size: Medium
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Text Size: Large
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Text Size: Large
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Usage
Do
- Use this component only on high-impact pages that need to make a strong first impression
- Keep text content brief and to the point to avoid overwhelming the viewer
- Choose a background video that visually supports the message without being distracting
- Make sure the page title is clear and meaningful
- Align content based on the layout and visual balance of the page
- Select text sizes that suit the importance of each element and fit well within the space
- Preview the component with your video and text choices to check for visual harmony
- Use breadcrumbs if the page is part of a larger site structure to help with orientation
Don't
- Avoid using this component on standard or frequently updated pages like news articles or basic content pages
- Don’t rely on the video to carry the message — the text should always stand on its own
- Skip overly busy or fast-paced videos that make it hard to focus on the text
- Avoid cramming too much text into the billboard area
- Don’t use multiple calls to action in this component — keep the focus clear
- Refrain from mixing too many text colors or sizes within a single instance
- Avoid reusing the same video billboard across multiple pages unless there’s a strong reason to
- Don’t stack this component with other visually heavy components right below it
Accessibility
- Ensure the text color stands out clearly against the video background for readability.
- Choose videos without rapid movement or flashing to avoid triggering motion sickness or seizures.
- Keep the text short and easy to read, as longer content is difficult to follow over moving visuals.
- Avoid placing critical information solely within this component due to its accessibility limitations.