Choose a version:

ExternalVideo
component

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.

ExternalVideoBaseProps

data
An object with fields that correspond to the Storefront API's [ExternalVideo object](https://shopify.dev/api/storefront/reference/products/externalvideo).
```
PartialDeep<ExternalVideoType, {recurseIntoArrays: true}>
```
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 | Vimeo
```

export interface ExternalVideoBaseProps {
  /**
   * An object with fields that correspond to the Storefront API's [ExternalVideo object](https://shopify.dev/api/storefront/reference/products/externalvideo).
   */
  data: PartialDeep<ExternalVideoType, {recurseIntoArrays: true}>;
  /** 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).
   */
  options?: YouTube | 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
```

interface 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
```

interface Vimeo {
  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;
  '#t'?: string;
  texttrack?: string;
  title?: VimeoBoolean;
  transparent?: VimeoBoolean;
}

VimeoBoolean

0 | 1 | boolean

Was this section helpful?

ExternalVideo example

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

description

I am the default 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

ExternalVideocomponent

Anchor to propsProps

ExternalVideoBaseProps

YouTube

Vimeo

VimeoBoolean

examples

ExternalVideo example

description

JavaScript

TypeScript

Anchor to relatedRelated

ExternalVideo
component