ExternalVideo

The `ExternalVideo` component renders an embedded video for the Storefront API's [ExternalVideo object](https://shopify.dev/api/storefront/reference/products/externalvideo).

ExternalVideo example

import {ExternalVideo} from '@shopify/hydrogen-react';

export default function MyProductVideo({products}) {
  const firstMediaElement = products.nodes[0].media.nodes[0];

  if (firstMediaElement.__typename === 'ExternalVideo') {
    return <ExternalVideo data={firstMediaElement} />;
  }
}

import {ExternalVideo} from '@shopify/hydrogen-react';
import type {ProductConnection} from '@shopify/hydrogen-react/storefront-api-types';

export default function MyProductVideo({
  products,
}: {
  products: ProductConnection;
}) {
  const firstMediaElement = products.nodes[0].media.nodes[0];
  if (firstMediaElement.__typename === 'ExternalVideo') {
    return <ExternalVideo data={firstMediaElement} />;
  }
}

Props

Takes in the same props as a native `<iframe>` element, except for `src`.

ExternalVideoBaseProps

data

An object with fields that correspond to the Storefront API's [ExternalVideo object](https://shopify.dev/api/storefront/reference/products/externalvideo).

options

An object containing the options available for either [YouTube](https://developers.google.com/youtube/player_parameters#Parameters) or [Vimeo](https://vimeo.zendesk.com/hc/en-us/articles/360001494447-Using-Player-Parameters).

YouTube

autoplay

cc_lang_pref

cc_load_policy

color

controls

disablekb

enablejsapi

end

fs

hl

iv_load_policy

list

list_type

loop

modest_branding

origin

playlist

plays_inline

rel

start

widget_referrer

Vimeo

#t

autopause

autoplay

background

byline

color

controls

dnt

loop

muted

pip

playsinline

portrait

quality

speed

texttrack

title

transparent

VimeoBoolean

0 | 1 | boolean

Related

  • MediaFile