Version:

    Youtube video background element

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

    Site Studio uses third-party plugins to connect to Youtube's API. Youtube often update their API, but third parties may not always update their plugins. We make every effort to make sure these are up to date. We suggest using the video background element instead of the Youtube video background element.

    Locating the Youtube video background element

    To find the Youtube 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 Youtube video background element.

    youtube-video-background.png

    The Youtube video background element includes the following fields:

    Why choose video background over video embed?

    The Youtube video background element is a container. You can add child elements into it and they will display over the top of the video. The Youtube video embed is a content element and cannot have child elements.

    Setting the video background size

    The Youtube video background does not have any size by default. You must set the size of the element using styles. To set the size of the element:

    1. Double click (or click ... and Edit) on the Youtube video background element to open its settings
    2. Click on the Styles tab
    3. Click on the Properties menu
    4. Click on Layout
    5. Click on Width and Height to add these properties to your Style form
    6. Enter a width and height in the fields. For more information about accepted units and values for these fields see Height properties and Width properties
    7. Click Apply

    Video

    • Youtube URL - Add the URL of the video. The URL of a Youtube video can be copied from the browser address bar or the Share link when viewing a Youtube video
    • Preview - Shows a preview of the Youtube video being used. The preview does not show the settings applied in Video controls.

    Mobile fallback image

    Most mobile and touch devices will not show videos as a background to an element. For these devices, a fallback image should be uploaded.

    • Image - Select a fallback image

    Position

    The Youtube video background will scale to fill both the height and width of its container.

    • Scale from - Set the starting point at which the video background will scale from.

    Overlay and opacity

    • Overlay - Apply an pattern overlay to the video. These are used to give the appearance of a sharper video
    • Opacity - Set the opacity of the video. 1.0 is full opacity and 0.1 is 10% opacity

    Video controls

    The video controls are provided by Youtube and can be set to active or inactive using the video control toggles.

    • Autoplay - Set the video to play as soon as it's loaded
    • Loop video - Set the video to start again when it's finished
    • Pause when out of view - Set the video to pause when it's not within the browser viewport

    Audio controls

    • Mute audio - Mute the audio

    Start stop frames

    • Start frame - Set the frame for the video to start at
    • Stop frame - Set the frame for the video to stop at

    Video quality

    You can set the quality of the video playback. The higher the quality, the faster the internet connection required for smooth playback, and the higher the quality required from the original video uploaded to Youtube.

    Use Default and the video quality will automatically match the user's available bandwidth availability.

    • Quality - Set the video quality. These settings are provided by Youtube
      • Default (Recommended) - YouTube will select the most appropriate playback quality.
      • Small - Video height is 240px
      • Medium - Video height is 360px
      • Large - Video height is 480px
      • HD 720p - Video height is 720px
      • HD 1080p - Video height is 1080px
      • Hi-res - Video height can be above 1080px

    Custom style

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

    Match heights

    • Match heights - Match the height of the element using:
      • None - Removes the match heights at the specific breakpoint
      • Class - Match the height of the element with another element with the same class name
      • Children with class - Match the heights of any child elements with the same class name
      • Child element - Match the heights of all child elements of the same type.

    For more information on Match heights, see Match the heights of elements.

    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.