The “Text Panel Over Video Background” component allows you to integrate engaging visual content with informative text. This component features a video playing in the background with a customizable text panel overlay. Authors can adjust various settings, such as changing the height of the component, altering the panel background color, and moving the panel’s location to best fit their design needs.

This is a Pre Heading

This is a Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet justo donec enim diam vulputate ut pharetra sit. Nam at lectus urna duis. Ut sem viverra aliquet eget sit amet tellus cras adipiscing. Praesent semper feugiat nibh sed pulvinar proin gravida hendrerit.

This is a CTA

Content Options

This is a Pre Heading

This component has a pre heading

This component has some text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet justo donec enim diam vulputate ut pharetra sit. Nam at lectus urna duis. Ut sem viverra aliquet eget sit amet tellus cras adipiscing. Praesent semper feugiat nibh sed pulvinar proin gravida hendrerit.

This component has a CTA

This is a CTA

Layout and Styling Options

Section Size Options

Section Size

Extra Small

Section Size

Small

Section Size

Default

Section Size

Large

Section Size

Extra Large

Section Size

Remove Padding

Background Color

Background Color

White

Background Color

Muted

Background Color

Primary

Background Color

Primary Light

Background Color

Secondary

Background Color

Secondary Light

Background Color

Tertiary

Panel Alignment

Panel Alignment

Left

Panel Alignment

Center

Panel Alignment

Right

Margin bottom

Margin bottom

None

Margin bottom

X-Small

Margin bottom

Small

Margin bottom

Medium

Margin bottom

Large

Margin bottom

X-Large

the end

Margin top

Margin top

None

Margin top

X-Small

Margin top

Small

Margin top

Medium

Margin top

Large

Margin top

X-Large

the end

Usage

Do

  • Ensure the video background complements the text content to avoid visual distraction.
  • Select a panel background color that contrasts well with the video for easy readability.
  • Adjust the height of the component to fit well within the page layout without overwhelming other content.
  • Position the text panel strategically to avoid covering important parts of the video.
  • Use concise and impactful text to maximize engagement and clarity.
  • Test the component on different devices to ensure it looks good on all screen sizes.
  • Keep the text panel size proportional to the video background for a balanced appearance.
  • Choose high-quality videos that load quickly to enhance user experience.
  • Use the component to highlight key information or calls to action effectively.

Don't

  • Avoid using overly busy or distracting videos that can make the text hard to read.
  • Refrain from placing the text panel in a location that obstructs crucial visual elements of the video.
  • Do not use text colors that blend into the video, making the text difficult to see.
  • Avoid filling the text panel with too much content; keep it concise to maintain reader interest.
  • Don’t use low-resolution videos as they can appear pixelated and unprofessional.
  • Avoid setting the component height too tall, which can disrupt the overall page flow.
  • Do not rely solely on the video background to convey important information; ensure the text is clear and informative.
  • Refrain from using videos with rapid scene changes that may cause viewer distraction or discomfort.

Accessibility

  • Ensure sufficient color contrast between the text panel and video background to make text readable for users with visual impairments.
  • Avoid using flashing or fast-moving videos that could trigger seizures in users with photosensitive epilepsy.