hydrogen/packages/hydrogen/src/components/Video/README.md

The Video component renders a video for the Storefront API's Video object.

Example code

import {Video} from '@shopify/hydrogen';
import gql from 'graphql-tag';

const QUERY = `#graphql
  ${Video.Fragment}
  query Products {
    products(first: 5) {
      edges {
        node {
          id
          title
          handle
          media(first: 1) {
            edges {
              node {
                ... on Video {
                  mediaContentType
                  ...VideoFragment
                }
              }
            }
          }
        }
      }
    }
  }
`;

export default function MyProductVideo() {
  const {data} = useShopQuery({query: QUERY});

  const firstMediaElement = data.products.edges[0].node.media.edges[0].node;
  if (firstMediaElement.mediaContentType === 'VIDEO') {
    return <Video video={firstMediaElement} />;
  }
}

Props

Name	Type	Description
video	Unknown<UndocumentedType, UndocumentedType, UndocumentedType>	An object corresponding to the GraphQL fragment.
options?	ImageSizeOptions	An object of image size options for the video's previewImage.

Component type

The Video component is a shared component, which means that it renders on both the server and the client. For more information about component types, refer to React Server Components.

GraphQL fragment

The following fragment is available as a string for your GraphQL queries using VideoFragment or Video.Fragment. Using this fragment ensures that you have all the data necessary for rendering the Video component.

fragment VideoFragment on Video {
  id
  previewImage {
    url
  }
  sources {
    mimeType
    url
  }
}

Related components

• MediaFile