Choose a version:

ExternalVideo

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

Anchor to propsProps

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

Anchor to data data PartialDeep<ExternalVideoType, {recurseIntoArrays: true}> required: An object with fields that correspond to the Storefront API's ExternalVideo object.
Anchor to options options |: An object containing the options available for either YouTube or Vimeo.

YouTube

autoplay
```
0 | 1
```
cc_lang_pref
```
string
```
cc_load_policy
```
1
```
color
```
'red' | 'white'
```
controls
```
0 | 1
```
disablekb
```
0 | 1
```
enablejsapi
```
0 | 1
```
end
```
number
```
fs
```
0 | 1
```
hl
```
string
```
iv_load_policy
```
1 | 3
```
list
```
string
```
list_type
```
'playlist' | 'user_uploads'
```
loop
```
0 | 1
```
modest_branding
```
1
```
origin
```
string
```
playlist
```
string
```
plays_inline
```
0 | 1
```
rel
```
0 | 1
```
start
```
number
```
widget_referrer
```
string
```

Vimeo

#t
```
string
```
autopause
```
VimeoBoolean
```
autoplay
```
VimeoBoolean
```
background
```
VimeoBoolean
```
byline
```
VimeoBoolean
```
color
```
string
```
controls
```
VimeoBoolean
```
dnt
```
VimeoBoolean
```
loop
```
VimeoBoolean
```
muted
```
VimeoBoolean
```
pip
```
VimeoBoolean
```
playsinline
```
VimeoBoolean
```
portrait
```
VimeoBoolean
```

quality

'240p' | '360p' | '540p' | '720p' | '1080p' | '2k' | '4k'

speed
```
VimeoBoolean
```
texttrack
```
string
```
title
```
VimeoBoolean
```
transparent
```
VimeoBoolean
```

VimeoBoolean

0 | 1 | boolean

Examples

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

export default function MyProductVideo({products}) {

const firstMediaElement = products.nodes[0].media.nodes[0];

if (firstMediaElement.__typename === 'ExternalVideo') {

return <ExternalVideo data={firstMediaElement} />;

}

Examples

ExternalVideo example

JavaScript

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

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

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

TypeScript

import {ExternalVideo} from '@shopify/hydrogen';
import type {ProductConnection} from '@shopify/hydrogen/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} />;
  }
}

Anchor to RelatedRelated

MediaFile

Was this page helpful?