Video

component

VideoProps

• data

  An object with fields that correspond to the Storefront API's [Video object](https://shopify.dev/api/storefront/2025-01/objects/video).

  PartialDeep<VideoType, {recurseIntoArrays: true}>

• previewImageOptions

  An object of image size options for the video's `previewImage`. Uses `shopifyImageLoader` to generate the `poster` URL.

  LoaderParams

• sourceProps

  Props that will be passed to the `video` element's `source` children elements.

  HTMLAttributes<HTMLSourceElement> & { 'data-testid'?: string; }

export interface VideoProps {
  /** An object with fields that correspond to the Storefront API's [Video object](https://shopify.dev/api/storefront/2025-01/objects/video). */
  data: PartialDeep<VideoType, {recurseIntoArrays: true}>;
  /** An object of image size options for the video's `previewImage`. Uses `shopifyImageLoader` to generate the `poster` URL. */
  previewImageOptions?: Parameters<typeof shopifyLoader>[0];
  /** Props that will be passed to the `video` element's `source` children elements. */
  sourceProps?: HTMLAttributes<HTMLSourceElement> & {
    'data-testid'?: string;
  };
}

LoaderParams

• crop

  The URL param that controls the cropping region

  Crop

• height

  The URL param that controls height

  number

• src

  The base URL of the image

  string

• width

  The URL param that controls width

  number

{
  /** The base URL of the image */
  src?: ImageType['url'];
  /** The URL param that controls width */
  width?: number;
  /** The URL param that controls height */
  height?: number;
  /** The URL param that controls the cropping region */
  crop?: Crop;
}

Crop

'center' | 'top' | 'bottom' | 'left' | 'right'