Jumbotrons and videotrons

A jumbotron is a design element that applies a background image to a block of content. A videotron does the same, but uses a background video instead. Images and videos used as backgrounds are intended for decorative purposes only. These elements are not intended to convey content explicitly. Videos are automatically muted and looped.

Jumbotrons can be applied to:

Page headers
Page headings
Page sections

Videotrons can be applied to:

Page headers
Page headings

Examples

A maximized window-width videotron heading.

A auto-sized container-width jumbotron heading.

Datadef elements

The following datadef elements apply to all jumbotron and videotron instances.

Datadef element	Presence	Description
... > Jumbotron/Videotron > Aspect ratio	Page header Page heading Page sections	Used to set the aspect ratio of the jumbotron or videotron: auto - the aspect ratio is set according to the dimensions of the content laid over the image or video. maximize - the jumbotron or videotron will be sized to occupy all available screen space in the browser window. 3:2 - common native aspect ratio for photos. 16:9 - common native aspect ratio for videos. custom - select this option to set a custom aspect ratio.
... > Jumbotron/Videotron > Custom aspect ratio (w:h)	Page header Page heading Page sections	Appears only if 'Aspect ratio' is set to 'custom'. Provide the aspect ratio in w:h format, with a colon separating the width value from the height value.
... > Jumbotron > Background image	Page header Page heading Page sections	Applies only to jumbotrons. Identifies the image to be used as the header background. Tips: Large images look best here (1600 to 2000 pixels wide), but be mindful of the balance between image quality and file size. Page load time can be affect by heavy images.
... > Videotron > Video	Page header Page heading	Applies only to videotrons. Identifies the video to be used as the header background. Tips: Videos in mp4 format offer the greatest browser compatibility. Large videos can significantly affect page load times. Be mindful of playback duration and resolution (720p is usually sufficient). Large videos can be optimized for the web with Handbrake.
... > Videotron > Still frame image	Page header Page heading	Applies only to videotrons. Identifies the image to be displayed when the background video cannot be loaded or played. Tips: Use the first frame of the background video as the still frame image. Ensure the image dimensions match the video dimensions.
... > Videotron > Loop video	Page header Page heading	Indicates whether the video will loop playback.
... > Jumbotron/Videotron > Content alignment	Page header Page heading	Aligns the additional header content to either left or center.
... > Jumbotron/Videotron > Overlay value	Page heading Page sections	Indicates the color value of the jumbotron/videotron overlay: dark - applies a dark overlay with light text. medium - applies a medium overlay with light text. A slight drop shadow is also applied to the text to enhance readability and color contrast. light - applies a light overlay with dark text.
... > Jumbotron/Videotron > Additional content	Page header Page heading	Provide any additional content here to be displayed in the page header below the masthead. Accessibility note: do not insert headings here when working with page headers. You can achieve the look of headings using the provided wysiwyg styles. Refer to 'Styling wysiwyg content'.
... > Jumbotron/Videotron > Width	Page heading Page sections	Indicates the width of the heading background image or video. container - the background image or video with is constrained to the page container width, which varies depending on screen size: Large: 1170px Medium: 970px Small: 750px window - the background image or video width matches the width of the browser window. Note: this option is not compatible with page layouts containing secondary navigation or sidebar elements.