Skip to content

Featured Video

Summary

A featured video section to display an embedded video and large call out section. The video stacks on top of the call out section on mobile and tablet sizes. On desktop sizes, the video and call out section display side by side, with an option to display the video on the left or right side of the section.

Utilizes video provider and video id attributes to tie into popular video service providers such as YouTube and Dailymotion with the video id value.

Display

Mobile

Desktop


Create Component

Steps:

1. Check layout and click View/Edit Layout.

2. Click + Add New Component.

3. Select Featured Video With Overlay.

4. Enter component name and component code.

5. Set component as Active.

6. Enter following inputs in admin.


Attention

Component code should be unique to each component.


Admin Display

Component Attributes

Attribute Description Required
Lead-In Text Lead-in title text to display above the call out section title. No
Main Text Main text body for the call out section. Displays below the call out section title. No
CTA Link The href value for the CTA button. No
CTA Copy The CTA button text. No
Video Provider

The service provider of the featured video.

Current options include:
  • Dailymotion
  • Other
  • Vimeo
  • Wistia
  • YouTube
Yes
Video ID The id or unique identifier of the featured video. For example, a Video ID value for a YouTube video would be Y2nEje0JGdQ. This value can be set to the video or embed url when using the Other option for the Video Provider attribute. Yes
Video Display On Right? Mark as checked to display the video on the right side of the featured video section on Desktop sizes. No

Tip

If the service provider for a featured video is not listed in the Video Provider attribute options list, use the Other option as the Video Provider attribute value and enter the embed or video URL as the Video ID attribute value.

Notes

Notes

The Component Name is used for the call out section main title. It is also used for the CTA button text if a CTA Link attribute value is provided and the CTA Copy attribute value is empty.

Components can be set to hide or show using Not Valid Before & Not Valid After.

Default

Default