Video background element

Use the Video background element to add a video as a background to your layout.

Locating the Video background element

To find the Video background element:

1. Navigate to a component or a template with the Layout canvas
2. Click the + button on the Layout canvas
3. Within the Elements tab, look for the Video background element.

The Video background element includes the following fields:

Video URL

• Video URL - Insert the URL of the video that you would like to display, this can be from Vimeo if you have a pro/business account or a CDN hosted video. Supported video formats include MP4, OGG, WebM, MKV. Use the Video background element to add a HTML5 <video> element as a background to your layout.
• Preview - Shows a preview of the video being used. The preview does not show the settings applied in Video controls.

Video background element

Use the Video background element to add a video as a background to your layout.

Locating the Video background element

To find the Video background element:

1. Navigate to a component or a template with the Layout canvas
2. Click the + button on the Layout canvas
3. Within the Elements tab, look for the Video background element.

The Video background element includes the following fields:

Video URL

• Video URL - Insert the URL of the video that you would like to display, this can be from Vimeo if you have a pro/business account or a CDN hosted video. Supported video formats include MP4, OGG, WebM, MKV. Use the Video background element to add a HTML5 <video> element as a background to your layout.
• Preview - Shows a preview of the video being used. The preview does not show the settings applied in Video controls.

Video poster image

• Image - Upload an image to be shown while the video is downloading, as a fallback for legacy browsers that don't support the <video> element and for touch devices (if disable on touch is enabled)
• Drupal image style - Select the Drupal image style to apply to the poster image

Video behaviour 

• Pause when out of view - Set the video to pause when it's not within the browser viewport
• Disable on touch - Disable the video from playing on touch devices and show the poster image instead

Video and poster position 

• Scale from - Select where you want the video to scale from

Custom style

• Layout style - Apply a Layout custom style to the Video background container.

Comments

• Add comments - Add comments to the Element.  For more information, see Adding comments to an element.

Video poster image

• Image - Upload an image to be shown while the video is downloading, as a fallback for legacy browsers that don't support the <video> element and for touch devices (if disable on touch is enabled)
• Drupal image style - Select the Drupal image style to apply to the poster image

Video behaviour 

• Pause when out of view - Set the video to pause when it's not within the browser viewport
• Disable on touch - Disable the video from playing on touch devices and show the poster image instead

Video and poster position 

• Scale from - Select where you want the video to scale from

Custom style

• Layout style - Apply a Layout custom style to the Video background container.

Comments

• Add comments - Add comments to the Element.  For more information, see Adding comments to an element.