Choose a version:

Video

The Video component renders a video for the Storefront API's Video object. The component outputs a video element. You can customize this component using passthrough props.

Anchor to propsProps

Anchor to data data PartialDeep<VideoType, {recurseIntoArrays: true}> required: An object with fields that correspond to the Storefront API's Video object.
Anchor to previewImageOptions previewImageOptions: An object of image size options for the video's previewImage. Uses shopifyImageLoader to generate the poster URL.
Anchor to sourceProps sourceProps HTMLAttributes<HTMLSourceElement> & { 'data-testid'?: string; }: Props that will be passed to the video element's source children elements.

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

Crop

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

Examples

import {Video} from '@shopify/hydrogen-react';

export default function MyProductVideo({products}) {

const firstMediaElement = products.edges[0].node.media.edges[0].node;

if (firstMediaElement.__typename === 'Video') {

return <Video data={firstMediaElement} />;

}

Examples

Example code

Description

I am the default example

JavaScript

import {Video} from '@shopify/hydrogen-react';

export default function MyProductVideo({products}) {
  const firstMediaElement = products.edges[0].node.media.edges[0].node;

  if (firstMediaElement.__typename === 'Video') {
    return <Video data={firstMediaElement} />;
  }
}

TypeScript

import {Video} from '@shopify/hydrogen-react';
import type {ProductConnection} from '@shopify/hydrogen-react/storefront-api-types';

export default function MyProductVideo({
  products,
}: {
  products: ProductConnection;
}) {
  const firstMediaElement = products.edges[0].node.media.edges[0].node;

  if (firstMediaElement.__typename === 'Video') {
    return <Video data={firstMediaElement} />;
  }
}

Anchor to RelatedRelated

MediaFile

Image

Was this page helpful?