---
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: 2023-04
api_name: hydrogen
source_url:
  html: 'https://shopify.dev/docs/api/hydrogen/2023-04/components/video'
  md: 'https://shopify.dev/docs/api/hydrogen/2023-04/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**

  **PartialObjectDeep\<Video, { recurseIntoArrays: true; }>**

  **required**

  An object with fields that correspond to the Storefront API's [Video object](https://shopify.dev/api/storefront/2023-04/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

* src

  The base URL of the image

  ```ts
  string
  ```

* width

  The URL param that controls width

  ```ts
  number
  ```

* height

  The URL param that controls height

  ```ts
  number
  ```

* crop

  The URL param that controls the cropping region

  ```ts
  Crop
  ```

### Crop

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

Examples

### Examples

* #### Example code

  ##### Description

  I am the default example

  ##### JavaScript

  ```jsx
  import {Video} from '@shopify/hydrogen';

  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';
  import type {ProductConnection} from '@shopify/hydrogen/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/hooks/mediafile)

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