Video Banner

The video banner contains a self-hosted video that extends the width of the page.

When to use

Use the video banner component to feature a video as a banner on a page.

Anatomy

1. Video (required)

2. Play/Pause Button (required)

Examples

<div class="ucla-banner__video" style="min-height: 436px">
  <span aria-hidden="true" class="ucla-banner__video_overlay ucla-opacity-60 ucla-has-background-black"></span>
  <button class="ucla-banner__video_button-control playing">
    <svg width="40" height="40" viewBox="0 0 40 40" fill="none" title="Pause Video" xmlns="http://www.w3.org/2000/svg">
      <g filter="url(#filter0_b_0_1)">
        <circle cx="19.9994" cy="19.9994" r="19.9994" fill="black" fill-opacity="0.65" />
      </g>
      <path d="M13 29H18V11H13V29Z" fill="white" />
      <path d="M22 29H27V11H22V29Z" fill="white" />
      <defs>
        <filter id="filter0_b_0_1" x="-4" y="-4" width="47.9988" height="47.9988" filterUnits="userSpaceOnUse"
          color-interpolation-filters="sRGB">
          <feFlood flood-opacity="0" result="BackgroundImageFix" />
          <feGaussianBlur in="BackgroundImageFix" stdDeviation="2" />
          <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_0_1" />
          <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_0_1" result="shape" />
        </filter>
      </defs>
    </svg>
  </button>
  <video autoplay loop muted>
    <source src="../../../theme-assets/video/video-example.webm" />
    <source src="../../../theme-assets/video/video-example.mp4" />
  </video>
  <div class="ucla-banner__video_content py-9 mx-auto">
    <div class="container">
      <div class="ucla-grid cols-2">
        <h2 class="ucla-text-color-white">Lorem
          ipsum dolor sit amet consectetuer adipiscing</h2>
      </div>
    </div>
  </div>
</div>

The video banner is a video that plays in the background while having other elements on top of it. Building the banner requires the following structure:

• .ucla-banner__video - Container for the banner
  • .ucla-banner__video_overlay.ucla-opacity-60.ucla-has-background-black - Colored overlay to darken video
  • button.ucla-banner__video_button-control - Video controls to pause/play
    • svg - Play/Pause icon
  • video - Video player
    • source[src=*.webm] - webm video file (optional but recommended)
    • source[src=*.mp4] - mp4 video file (required)
  • .ucla-banner__video_content - Content inside the video banner

<div class="ucla-banner__video" style="min-height: 436px">
  <span aria-hidden="true" class="ucla-banner__video_overlay ucla-opacity-60 ucla-has-background-black"></span>
  <button class="ucla-banner__video_button-control playing">
    <svg width="40" height="40" viewBox="0 0 40 40" fill="none" title="Pause Video" xmlns="http://www.w3.org/2000/svg">
      <g filter="url(#filter0_b_0_1)">
        <circle cx="19.9994" cy="19.9994" r="19.9994" fill="black" fill-opacity="0.65" />
      </g>
      <path d="M13 29H18V11H13V29Z" fill="white" />
      <path d="M22 29H27V11H22V29Z" fill="white" />
      <defs>
        <filter id="filter0_b_0_1" x="-4" y="-4" width="47.9988" height="47.9988" filterUnits="userSpaceOnUse"
          color-interpolation-filters="sRGB">
          <feFlood flood-opacity="0" result="BackgroundImageFix" />
          <feGaussianBlur in="BackgroundImageFix" stdDeviation="2" />
          <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_0_1" />
          <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_0_1" result="shape" />
        </filter>
      </defs>
    </svg>
  </button>
  <video autoplay loop muted>
    <source src="../../../theme-assets/video/video-example.webm" />
    <source src="../../../theme-assets/video/video-example.mp4" />
  </video>
  <div class="ucla-banner__video_content py-9 mx-auto">
    <div class="container">
      <div class="ucla-grid cols-2">
        <h2 class="ucla-text-color-white">Lorem
          ipsum dolor sit amet consectetuer adipiscing</h2>
      </div>
    </div>
  </div>
</div>

Video Banner Content

You can insert any content in the .ucla-banner__video_content. However, it is recommended to use the Grid System inside the element and space it out using the spacing reference in the Developer Documenation tab.

<!-- ... -->
  <div class="ucla-banner__video_content py-9 mx-auto">
    <div class="container">
      <!-- ... -->
    </div>
  </div>
<!-- ... -->

Video Banner Height

The min-height is set as an inline-style on the container element .ucla-banner__video. We did this so you can have the flexibility to set the height you need.

Responsive Height

To have an adjustable height, you will need to do so in a CSS file with media-queries. Note: You must remove the inline-style so that it doesn’t override the CSS

.ucla-banner__video {
  min-height: /* your height here */
}

@media (/* your target media */) {
  .ucla-banner__video {
    min-height: /* your height here */
  }
}

Video Files

It is recommended to compress the video file as much as possible without reducing quality. Fortunately the <video> element supports multiple sources as a child. MDN Docs

You can use any video file but make sure to use mp4 as a fallback just in case your desired video format isn’t supported by a browser.

<!-- ... -->
  <video autoplay loop muted>
    <source src="/video-example.webm" />
    <source src="/video-example.mp4" />
  </video>
<!-- ... -->

Overlay

To meet WCAG 2.1 AA, the contrast ratio of text needs to be at least 4.5:1. You must adjust the overlay so that it meets this requirement by adjusting the .ucla-opacity-{number} class. Refer to our Colors for opacity settings.

<!--...-->
  <span aria-hidden="true" class="ucla-banner__video_overlay ucla-opacity-0 ucla-has-background-black"></span>
<!--...-->