Version:

    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.

    video-background.png

    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

    DX8 knowledge base icon

    Frequently asked questions

    Get instant answers to common questions. Available online 24/7.

    Find answers

    Raise a ticket icon

    Raise a support ticket

    To raise a ticket, sign into Acquia Cloud and select Help in the top menu.

    Raise support ticket

    Acquia

    Copyright © 2020 Acquia, Inc. All Rights Reserved. Drupal is a registered trademark of Dries Buytaert.