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:
- Navigate to a component or a template with the Layout canvas
- Click the + button on the Layout canvas
- 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.