Featured Video
Description
Full-width featured video with required title text and optional button and description.
On-page Example
To preview a live example of the component or inspect the code, click the link below
Component Specifications
| Item/Field | Description | Required/Optional |
|---|---|---|
| Video | Field Type: Video embed Aspect Ratio: 16:9 Display: Plays in a lightbox |
Required |
| Play/Pause | Hover: Button background changes to solid, orange outline appears around video Click: Opens lightbox and video begins to play |
NA |
| Image | Field Type: Image or thumbnail pulled from the embedded video. Display: Appears until Play button is clicked Optimal Image Dimensions: |
Optional |
| Title | Field type: Single line text Text: H2 Character Recommendation: 30 Wrapping: Single line |
Required |
| Description | Field type: Multi line text Text: Paragraph Character Recommendation: 300 Wrapping: Wraps to multiple lines |
Optional |
| Button Text | Field type: Single line text Character Recommendation: 15 Wrapping: Single line Hover: Outline closes, text turns background color and background inside button tuns white |
Optional |
| Button Destination | Field type: Link | Optional |
| Animation | None | NA |
| Mobile Response | Responsive to screen | NA |
| Page Placement | Full width | NA |
| Accessibility | Play/Pause and button are included in tab through. If user expands the lightbox to play the video, they can navigate to the Close button to close the lightbox. |
NA |
When to Use
When you have a high-quality video to feature.
How to Use
Add video, add title, add an optional thumbnail image, add optional description text, add optional button.
Accessibility Tips
Play/Pause and button are included in the tab through. If the user expands the lightbox to play the video, they can navigate to the Close button to close the lightbox.