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.
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} />;
}
}
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} />;
}
}
An object with fields that correspond to the Storefront API's [Video object](https://shopify.dev/api/storefront/2024-10/objects/video).
An object of image size options for the video's `previewImage`. Uses `shopifyImageLoader` to generate the `poster` URL.
Props that will be passed to the `video` element's `source` children elements.
The URL param that controls the cropping region
The URL param that controls height
The base URL of the image
The URL param that controls width
'center' | 'top' | 'bottom' | 'left' | 'right'