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.

The Video background element URL, only supports use of hosted videos in the following formats MP4, OGG, WebM, MKV. 

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.