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 />