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

Video - Background Mode

v0.0.0

To use the player for background videos, add a div with class .vi-video__background inside a Rectangular Image. The Rectangular Image provides the aspect ratio.

To fit the video within the required aspect ratio, we use an artificial object fit (js). Keep in mind that when the videos intrinsic aspect ratio is fitted in the container aspect ratio, parts of the video will not be visible.

Best to use Vimeo for this. Vimeo has a real background mode. Youtube does not. For instance, there is no way to disable captions (cc) on the YouTube player.

Note that background mode for the Vimeo player which hides the controls, autoplays and loops the video is only available to videos from Plus, PRO, or Business members.

<!-- Video  -->
<div class="vi-video" data-google-key="AIzaSyCCT69wewvdxKePFXN40xeJmy5MQusd9uc" data-video-id="PiVcDIRF3V4" data-video-poster="false" data-video-provider="youtube">
  <!-- Rectangular Image (mods: --custom) -->
  <div class="vi-rectangular-image vi-rectangular-image--custom" style="padding-top: 125.00000%">
    <div class="vi-video__background"></div>
  </div>
</div>
<hr>
<!-- Video  -->
<div class="vi-video" data-google-key="AIzaSyCCT69wewvdxKePFXN40xeJmy5MQusd9uc" data-video-id="PiVcDIRF3V4" data-video-provider="youtube">
  <!-- Rectangular Image (mods: --custom) -->
  <div class="vi-rectangular-image vi-rectangular-image--custom" style="padding-top: 30.00000%">
    <div class="vi-video__background"></div>
  </div>
</div>
<hr>
<!-- Video  -->
<div class="vi-video" data-google-key="AIzaSyCCT69wewvdxKePFXN40xeJmy5MQusd9uc" data-video-id="PiVcDIRF3V4" data-video-provider="youtube">
  <!-- Rectangular Image (mods: --video) -->
  <div class="vi-rectangular-image vi-rectangular-image--video">
    <div class="vi-video__background"></div>
  </div>
</div>
<hr>
<!-- Video  -->
<div class="vi-video" data-video-id="76979871" data-video-provider="vimeo">
  <!-- Rectangular Image (mods: --custom) -->
  <div class="vi-rectangular-image vi-rectangular-image--custom" style="padding-top: 125.00000%">
    <div class="vi-video__background"></div>
  </div>
</div>
<hr>
<!-- Video  -->
<div class="vi-video" data-video-id="76979871" data-video-provider="vimeo">
  <!-- Rectangular Image (mods: --custom) -->
  <div class="vi-rectangular-image vi-rectangular-image--custom" style="padding-top: 30.00000%">
    <div class="vi-video__background"></div>
  </div>
</div>
<hr>
<!-- Video  -->
<div class="vi-video" data-video-id="76979871" data-video-provider="vimeo">
  <!-- Rectangular Image (mods: --video) -->
  <div class="vi-rectangular-image vi-rectangular-image--video">
    <div class="vi-video__background"></div>
  </div>
</div>

Following data-attributes are required:

  • data-video-id to set the video id.
  • data-video-provider to set the video provider [youtube|vimeo].
  • data-google-key is required use the embed player API from google*

* No key is needed to use vimeo player API.

Instead of using data-google-key on every Vision Video Player, the key can also be set by creating a meta tag: <meta name="google-key" id="google-key" content="the-key-xyz" />

Following data-attributes are optional:

  • data-video-poster when false, no poster is dislayed while loading the vendor player.

The reference button #

Use the reference button when the video player is already somewhere in the markup. This prevents to much video instantiations.

Simply point the href attribute of the button (link) to the id of the video.

Note that background mode for the Vimeo player which hides the controls, autoplays and loops the video is only available to videos from Plus, PRO, or Business members.

Irony crucifix 
<!-- Button type: solid  -->
<a aria-label="Open and play the video in a dialog window." href="#sg-06884e" role="button" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn-solid--accent-1 vi-btn">Irony crucifix
  <!-- Icon video-play (mods: --button-end) -->
  <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 12" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button-end" aria-label="video-play" width="12" height="12"><path d="M11.1 5.4c.5.3.5.8 0 1.1l-7.3 4.9c-.4.3-.8.1-.8-.5V1c0-.5.4-.7.8-.4l7.3 4.8z" fill-rule="evenodd"></path></svg></a>
<hr>
<!-- Video  -->
<div class="vi-video" data-video-id="76979871" data-video-provider="vimeo" id="sg-06884e" role="button">
  <!-- Rectangular Image (mods: --video) -->
  <div class="vi-rectangular-image vi-rectangular-image--video">
    <div class="vi-video__background"></div>
  </div>
</div>

Stylesheets #

The following stylesheets are required to display this component.

The following additional stylesheets are used to display the example(s).

JavaScript #

The following javascripts are required to display this component.

The following additional javascript is used to display the example(s).

Usage documentation #

Usage documentation can be found here.

Changelog #

Changelog

Changed

  • 13 Aug 2025 - fix(video): fix inline video scroll offset calculation
  • 10 Juni 2024 - Use youtube-nocookie.com for youtube videos.
  • 04 Juli 2022 - Transcript default is ‘open’
  • A11y add enter/space to trigger video.
  • Try to autoplay lazy-loaded videos (only works when browser allows it)
  • Update javascript to push custom message to GTM dataLayer.
  • PBS support tweak to better support biosimilars theme
  • Pause on audio play
  • Update to new Vimeo oEmbed API
  • A modifier class --modal used by js was renamed --button. Make sure that js AND css are updated.
  • Refactor Mode: Background
  • Refactor Mode: Button
  • Print: css adjustments
  • Pause autoplay when playing video in slider.
  • Override onYouTubeIframeAPIReady when defined to prevent conflict with googletagmanager. Also works in IE11
  • Accessibility: return focus on initiating element.
  • Accessibility: added data-attribute data-video-modal-close-button-label to set the aria-label of the close button. Contents of button changed to X because we use an aria-label.
  • Accessibility: Video, add role and aria-label to video component.
  • Switch between ‘inline’ and ‘modal’ mode from 768px to 960px.

Fix

  • 11 Nov 2024 - fix(video): call to undefined modal
  • 14 May 2024 - Fix for lazy loaded videos playing after closing modals before video load.
  • 13 Sep 2023 - Try to fix unreproducable pause bug in video collection.
  • 11 Aug 2022 - Fix transcript content padding in documentation.
  • 12 Juli 2022 - Trigger dom change after cloning description.
  • 28 June 2022 - Fix scrollparent detector
  • Youtube background shows as 1px black line when video mode background
  • Fix rounding issue artificial object fit.
  • Fix autoplay lazy-loaded videos: hybrid mode should not autoplay when vendor embed is displayed (small screens).
  • Background Video GTM dataLayer error.
  • Stop Video Component correctly when modal is closed.
  • Scroll issue in inline mode.
  • YT Inline mode not playing in place on iOS.
  • Fix the handling of ‘external’ clicks towards cloned elements in slider.
  • Temporary Fix ‘Vimeo makes incorrect jsonp callback’ when the name of the callback starts with ‘jQuery’ (!?)
  • Slider change interference causing video pause.
  • Do not require youtube key for vimeo videos.
  • Object fit calculation not always correct.
  • Background mode creates modal on incoming links.

Added

  • 20 June 2022 - Documentation on the use of Transcripts
  • Optional data-video-poster option, to disable the poster image on a background video.
  • Add data-player-mode="button" to allow button mode on any link or button element.
  • Optional data-video-lazy option, to lazy load vendor player.
  • PBS support
  • Mode: Inline
  • Mode: Modal
  • Add data attribute data-video-description-id to point to description. Works for Video as wel as for Video Button
  • Video Button with documentation.
  • Background video examples
  • Initial draft