---
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-01
api_name: hydrogen-react
source_url:
  html: 'https://shopify.dev/docs/api/hydrogen-react/2023-01/components/video'
  md: 'https://shopify.dev/docs/api/hydrogen-react/2023-01/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/latest/objects/video).

* previewImageOptions

  { crop?: "center" | "top" | "bottom" | "left" | "right"; scale?: 2 | 3; width?: string | number; height?: string | number; src: string; }

  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.

Examples

### 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)