Video

v0.0.0

The Vision Video Player component supports YouTube, and Vimeo.

Browsers only allow instant playback of videos to take place if initiated by a user interaction, such as tapping/clicking on the player. For this to work, embeds are placed and API(s) loaded and initialized.

The player has the following modes:

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.

Usage Documentation

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