---
title: Video
description: |-
  The `Video` component renders a video for the Storefront API's [Video object](https://shopify.dev/api/storefront/reference/products/video).
  The component outputs a `video` element. You can [customize this component](https://shopify.dev/api/hydrogen/components#customizing-hydrogen-components) using passthrough props.
api_version: 2025-07
api_name: hydrogen-react
source_url:
  html: https://shopify.dev/docs/api/hydrogen-react/latest/components/video
  md: https://shopify.dev/docs/api/hydrogen-react/latest/components/video.md
---

# Video

The `Video` component renders a video for the Storefront API's [Video object](https://shopify.dev/api/storefront/reference/products/video). The component outputs a `video` element. You can [customize this component](https://shopify.dev/api/hydrogen/components#customizing-hydrogen-components) using passthrough props.

## Props

* data

  PartialDeep\<VideoType, {recurseIntoArrays: true}>

  required

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

* previewImageOptions

  LoaderParams

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

* 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

  ```ts
  Crop
  ```

* height

  The URL param that controls height

  ```ts
  number
  ```

* src

  The base URL of the image

  ```ts
  string
  ```

* width

  The URL param that controls width

  ```ts
  number
  ```

```ts
{
  /** 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

```ts
'center' | 'top' | 'bottom' | 'left' | 'right'
```

### Examples

* #### Example code

  ##### Description

  I am the default example

  ##### JavaScript

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

  ```tsx
  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} />;
    }
  }
  ```

## Related

[- MediaFile](https://shopify.dev/api/hydrogen-react/hooks/mediafile)

[- Image](https://shopify.dev/api/hydrogen-react/hooks/image)