Videocomponent
component
The Video component renders a video for the Storefront API's Video object.
The component outputs a video element. You can customize this component using passthrough props.
Anchor to propsProps
- Anchor to datadataPartialDeep<VideoType, {recurseIntoArrays: true}>required
An object with fields that correspond to the Storefront API's Video object.
- Anchor to previewImageOptionspreviewImageOptionsLoaderParams
An object of image size options for the video's
. Usesto generate theposterURL.- Anchor to sourcePropssourcePropsHTMLAttributes<HTMLSourceElement> & { 'data-testid'?: string; }
Props that will be passed to the
videoelement'ssourcechildren elements.
LoaderParams
- crop
The URL param that controls the cropping region
Crop - height
The URL param that controls height
number - src
The base URL of the image
string - width
The URL param that controls width
number
{
/** 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
'center' | 'top' | 'bottom' | 'left' | 'right'Was this section helpful?
Example code
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} />;
}
}
Examples
Example code
Description
I am the default example
JavaScript
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
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} />; } }
