Background Video

Background Video should be used only for decorative purposes.

Important Notes:

Set video boolean prop to true when you want to render a background video.

When creating the video element, it is required to make sure the controls attribute is not present. In addition, make sure the following attributes are present on the video element; autoplay, loop, and muted.

Consider this video as decoration and not content (limit elements like words, prominant faces, or brand marks from the video), expect it to be cropped at some point.

By design, the background video will disappear when the device witdth is below 800px (this is for visible stablity on smaller screens).

The background video should be nested inside the Ratio Element, refer to the Ratio Element docs for more information.

Provide a poster background image as a fallback. This will be displayed when the video is being loaded and smaller screen sizes, refer to the Background Image Element docs for more information.

The background video play or pause toggle button will be displayed based on logic in the Background Component Drupal module.

Demo

Visualization & Simulation

Imagine the Future with Decision Hub

Continuously improve results by visualizing how future adjustments to your strategies can impact business performance. Simulate and test your ideas, evaluate the results using intuitive views, and then deploy optimal alterations.

Twig

{% set toggle_button %}
  {% set icon_video %}
    <svg class="e-bolt-icon" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path d="M 11 10 L 17 10 L 17 26 L 11 26 M 20 10 L 26 10 L 26 26 L 20 26">
        <animate class="background-video-toggle-animation" begin="indefinite" attributeType="XML" attributeName="d" fill="freeze" from="M11,10 L17,10 17,26 11,26 M20,10 L26,10 26,26 20,26" to="M11,10 L18,13.74 18,22.28 11,26 M18,13.74 L26,18 26,18 18,22.28" dur="0.1s" keySplines=".4 0 1 1"
        repeatCount="1"></animate>
      </path>
  </svg>
  {% endset %}

  {% include '@bolt-elements-button/button.twig' with {
    content: 'Pause',
    icon_only: icon_video,
    border_radius: 'full',
    hierarchy: 'secondary',
    attributes: {
      type: 'button',
      'data-video-target': 'backgroundVideoTarget',
      class: 'js-base-video-toggle js-bolt-background-video-toggle c-bolt-background__video-toggle-button is-playing',
      'aria-label': 'Pause the background video'
    }
  } only %}
{% endset %}
{% set background_video %}
  {% include '@bolt-elements-image/image.twig' with {
    attributes: {
      src: '/images/placeholders/backgrounds/background-light-tall.jpg',
      background: true,
      loading: 'lazy',
    }
  } only %}
  {% set video %}
    <video-js
      data-account="1900410236"
      data-player="O3FkeBiaDz"
      data-embed="default"
      data-video-id="5999324539001"
      autoplay loop muted
      id="backgroundVideoTarget"
      class="c-base-video"></video-js>
  {% endset %}
  {% include '@bolt-elements-ratio/ratio.twig' with {
    content: video,
    ratio: 'wide'
  } only %}
{% endset %}
{% include './_00-background-band-demo.twig' with {
  background: {
    fill: 'solid',
    video: true,
    video_toggle_button: toggle_button,
    opacity: 'heavy',
    items: [
      background_video,
    ]
  }
} only %}

HTML