ExternalVideo

The ExternalVideo component renders an embedded video for the Storefront API's ExternalVideo object.

The component outputs an <iframe> element. You can customize this component using passthrough props.

Example code

import {ExternalVideo, gql} from '@shopify/hydrogen';

const QUERY = gql`
  query Products {
    products(first: 5) {
      edges {
        node {
          id
          title
          handle
          media(first: 1) {
            edges {
              node {
                ... on ExternalVideo {
                  id
                  embedUrl
                }
              }
            }
          }
        }
      }
    }
  }
`;

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

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

Props

Name	Type	Description
data	PartialDeep<ExternalVideoType>	An object with fields that correspond to the Storefront API's ExternalVideo object.
options?	YouTube | Vimeo	An object containing the options available for either YouTube or Vimeo.
frameBorder	Refer to the MDN Documentation for more information.	Defaults to '0'.
allow	Refer to the MDN Documentation for more information.	Defaults to 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture'.
allowFullScreen	Refer to the MDN Documentation for more information.	Defaults to 'true'.
loading	Refer to the MDN Documentation for more information.	Defaults to 'lazy'.

Required fields

The ExternalVideo component requires the following field from the Storefront API's ExternalVideo object:

{
  embedUrl
}

Component type

The ExternalVideo 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.

Related components

• MediaFile