Open Close
Teva VIsion
Font Face
Teva Sans Latin
Drafts & Templates
PBS Templates
Primitives & components context
Teva Global
Primitives & components: Teva Global

Video Hero

v0.0.0

The Video Hero component can show a text animation on top of a background video. At the bottom is a scroll down button.

The size of the component depends on viewport and header.

Home #

Example of 'home' animation. Please note the markup of .vi-video-hero__content

UNLOCKING VALUE

IN THE NEW FRONTIER
OF TEVA 

<!-- Video Hero  -->
<div class="vi-video-hero">
  <div class="vi-video-hero__center">
    <div class="vi-video-hero__canvas">
      <div aria-hidden="true" class="vi-video-hero__background">
        <!-- Video  -->
        <div class="vi-video" data-video-id="76979871" data-video-provider="vimeo">
          <!-- Rectangular Image (mods: --fit) -->
          <div class="vi-rectangular-image vi-rectangular-image--fit">
            <div class="vi-video__background"></div>
          </div>
        </div>
      </div>
      <div class="vi-video-hero__foreground">
        <div class="vi-video-hero__container">
          <div class="vi-video-hero__content" data-animation="home">
            <!-- h1-h6 -->
            <h1 class="vi-video-hero__text">
              <span class="vi-video-hero__primary">
                <span class="vi-video-hero__scramble">
                  UNLOCKING
                </span>
                <span class="vi-video-hero__scramble">
                  VALUE
                </span>
              </span>
            </h1>
            <p class="vi-video-hero__text mb-0">
              <span class="vi-video-hero__secondary">
                IN THE NEW FRONTIER
                <br>
                OF TEVA
              </span>
            </p>
          </div>
          <button class="vi-video-hero__down">
            <span class="sr-only">See more</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

Lobby #

Example of 'lobby' animation. Please note the markup of .vi-video-hero__content

UNLOCKING
THE ESSENTIALS 

<!-- Video Hero  -->
<div class="vi-video-hero">
  <div class="vi-video-hero__center">
    <div class="vi-video-hero__canvas">
      <div aria-hidden="true" class="vi-video-hero__background">
        <!-- Video  -->
        <div class="vi-video" data-video-id="76979871" data-video-provider="vimeo">
          <!-- Rectangular Image (mods: --fit) -->
          <div class="vi-rectangular-image vi-rectangular-image--fit">
            <div class="vi-video__background"></div>
          </div>
        </div>
      </div>
      <div class="vi-video-hero__foreground">
        <div class="vi-video-hero__container">
          <div class="vi-video-hero__content" data-animation="lobby">
            <!-- h1-h6 -->
            <h1 class="vi-video-hero__text">
              <div class="vi-video-hero__primary">
                <span class="vi-video-hero__scramble">
                  UNLOCKING
                </span>
              </div>
              <div class="vi-video-hero__secondary vi-video-hero__secondary--dominant">
                <span class="vi-video-hero__scramble">
                  THE ESSENTIALS
                </span>
              </div>
            </h1>
          </div>
          <button class="vi-video-hero__down">
            <span class="sr-only">See more</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

Text Color #

The color of the text can be changed for contrasting the video colors or aesthetics.

To change the color, both .vi-video-hero__primary and .vi-video-hero__secondary have the following %modifiers:

  • --dominant for the dominant brand color
  • --accent-1
  • --accent-2
  • --inversed black

See the Lobby animation for an example.

UNLOCKING VALUE

IN THE NEW FRONTIER
OF TEVA 

<div class="vi-video-hero__content" data-animation="home">
  <!-- h1-h6 -->
  <h1 class="vi-video-hero__text">
    <span class="vi-video-hero__primary vi-video-hero__primary--dominant">
      <span class="vi-video-hero__scramble">
        UNLOCKING
      </span>
      <span class="vi-video-hero__scramble">
        VALUE
      </span>
    </span>
  </h1>
  <p class="vi-video-hero__text mb-0">
    <span class="vi-video-hero__secondary vi-video-hero__secondary--dominant">
      IN THE NEW FRONTIER
      <br>
      OF TEVA
    </span>
  </p>
</div>

UNLOCKING VALUE

IN THE NEW FRONTIER
OF TEVA 

<div class="vi-video-hero__content" data-animation="home">
  <!-- h1-h6 -->
  <h1 class="vi-video-hero__text">
    <span class="vi-video-hero__primary vi-video-hero__primary--accent-1">
      <span class="vi-video-hero__scramble">
        UNLOCKING
      </span>
      <span class="vi-video-hero__scramble">
        VALUE
      </span>
    </span>
  </h1>
  <p class="vi-video-hero__text mb-0">
    <span class="vi-video-hero__secondary vi-video-hero__secondary--accent-1">
      IN THE NEW FRONTIER
      <br>
      OF TEVA
    </span>
  </p>
</div>

UNLOCKING VALUE

IN THE NEW FRONTIER
OF TEVA 

<div class="vi-video-hero__content" data-animation="home">
  <!-- h1-h6 -->
  <h1 class="vi-video-hero__text">
    <span class="vi-video-hero__primary vi-video-hero__primary--accent-2">
      <span class="vi-video-hero__scramble">
        UNLOCKING
      </span>
      <span class="vi-video-hero__scramble">
        VALUE
      </span>
    </span>
  </h1>
  <p class="vi-video-hero__text mb-0">
    <span class="vi-video-hero__secondary vi-video-hero__secondary--accent-2">
      IN THE NEW FRONTIER
      <br>
      OF TEVA
    </span>
  </p>
</div>

UNLOCKING VALUE

IN THE NEW FRONTIER
OF TEVA 

<div class="vi-video-hero__content" data-animation="home">
  <!-- h1-h6 -->
  <h1 class="vi-video-hero__text">
    <span class="vi-video-hero__primary vi-video-hero__primary--inversed">
      <span class="vi-video-hero__scramble">
        UNLOCKING
      </span>
      <span class="vi-video-hero__scramble">
        VALUE
      </span>
    </span>
  </h1>
  <p class="vi-video-hero__text mb-0">
    <span class="vi-video-hero__secondary vi-video-hero__secondary--inversed">
      IN THE NEW FRONTIER
      <br>
      OF TEVA
    </span>
  </p>
</div>

No Animation #

Remove the element and contents of .vi-video-hero__content to remove the animation.

<!-- Video Hero  -->
<div class="vi-video-hero">
  <div class="vi-video-hero__center">
    <div class="vi-video-hero__canvas">
      <div aria-hidden="true" class="vi-video-hero__background">
        <!-- Video  -->
        <div class="vi-video" data-video-id="76979871" data-video-provider="vimeo">
          <!-- Rectangular Image (mods: --fit) -->
          <div class="vi-rectangular-image vi-rectangular-image--fit">
            <div class="vi-video__background"></div>
          </div>
        </div>
      </div>
      <div class="vi-video-hero__foreground">
        <div class="vi-video-hero__container">
          <button class="vi-video-hero__down">
            <span class="sr-only">See more</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

Stylesheets #

The following stylesheets are required to display this component.

JavaScript #

The following javascripts are required to display this component.

Usage documentation #

Usage documentation can be found here.

Changelog #

Changelog

Fix

  • 28 June 2022 - Fix scrollparent detector
  • Quickfix regression scrolldown button
  • Fix vh issue mobile
  • Fix narrow white line when content direction RTL
  • Some settings on OS make browsers have difficulty understanding 100vw.

Added

  • 17 June 22 - Text color modifiers for contrast and aestatics.
  • Initial draft