@crystallize/react-video v1.7.0

React Video for Crystallize

A React package to output videos from Crystallize using the native video element. Use this to easily embed videos powered by the Crystallize headless commerce service.

Demo

Demo

Install

yarn add @crystallize/react-video

Use

import { Video } from '@crystallize/react-video';
import '@crystallize/react-video/dist/styles.css';

const videoFromCrystallize = {
    playlists: [...],
    thumbnails: [...]
}

<Video
    {...videoFromCrystallize}
    thumbnmailProps={{ sizes: "(max-width: 700px) 90vw, 700px" }}
/>

Supported props

export interface Props extends HTMLAttributes<HTMLDivElement> {
  playlists: string[];
  thumbnails?: CrystallizeImageVariant[];
  thumbnailProps?: object;
  videoProps?: HTMLAttributes<HTMLVideoElement>;
  autoPlay?: boolean;
  loop?: boolean;
  muted?: boolean;
  controls?: boolean;
  poster?: string;
  playButtonText?: string;
}