@squiz/xaccel-assisted-video-player

Assisted Video Player

Description

This component will use native players from YouTube and Vimeo. DAM source is not supported at this point. The component will use the native players' accessibility standards and will not be Plug&Play team's responsibility to enhance it.

Components properties

Property	Property description	Property type	Is required
source	Video Source	string	[x]
teaserImg	Teaser Image URL	string
alternativeVersions	Alternative Versions	string
className	Overwrite ClassName	classNameOverride

Conditional component presentation

• Displaying only iFrame: To display only iframe please leave teaserImg empty string or do not provide this prop.
• Displaying Teaser Image: To display Teaser Image please provide a live URL to image that should be displayed as teaserImg prop. This option will not render iframe until clicking on image or SVG icon.

Props Example:

<AssistedVideoPlayer
  source="https://www.youtube.com/watch?v=GOIiwJ3axVk"
  teaserImg="https://source.unsplash.com/75xPHEQBmvA/640x360/"
  alternativeVersions="Alternative versions of video: check the video <a href='https://pnp.matrix.squiz.cloud' target='_blank'>transcript</a> or watch version with <a href='https://pnp.matrix.squiz.cloud' target='_blank'>audiodescription</a>"
  className={{
    className: "assisted-video-player",
    cssModule: { 'assisted-video-player__icon': 'dark' },
    replaceBaseClass: false,
  }}
/>

For more information about className please visit packages/utility/functions/src/generateClasses.js

Usage

Install the package by running: npm i @squiz/xaccel-assisted-video-player

import AssistedVideoPlayer from '@squiz/xaccel-assisted-video-player';

<AssistedVideoPlayer source teaserImg alternativeVersions className />