# 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.
### Example code

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

```

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

```


## Props

### VideoProps

### data
An object with fields that correspond to the Storefront API's [Video object](https://shopify.dev/api/storefront/2025-01/objects/video).
### previewImageOptions
An object of image size options for the video's `previewImage`. Uses `shopifyImageLoader` to generate the `poster` URL.
### sourceProps
Props that will be passed to the `video` element's `source` children elements.
### LoaderParams

### crop
The URL param that controls the cropping region
### height
The URL param that controls height
### src
The base URL of the image
### width
The URL param that controls width
### Crop

'center' | 'top' | 'bottom' | 'left' | 'right'
## Related
- [MediaFile](/api/hydrogen-react/hooks/mediafile)
- [Image](/api/hydrogen-react/hooks/image)