# 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

```jsx
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} />;
  }
}

```

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

value: `PartialDeep<ExternalVideoType, {recurseIntoArrays: true}>`

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

### options

value: `YouTube | Vimeo`

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

value: `0 | 1`



### cc_lang_pref

value: `string`



### cc_load_policy

value: `1`



### color

value: `'red' | 'white'`



### controls

value: `0 | 1`



### disablekb

value: `0 | 1`



### enablejsapi

value: `0 | 1`



### end

value: `number`



### fs

value: `0 | 1`



### hl

value: `string`



### iv_load_policy

value: `1 | 3`



### list

value: `string`



### list_type

value: `'playlist' | 'user_uploads'`



### loop

value: `0 | 1`



### modest_branding

value: `1`



### origin

value: `string`



### playlist

value: `string`



### plays_inline

value: `0 | 1`



### rel

value: `0 | 1`



### start

value: `number`



### widget_referrer

value: `string`



### Vimeo


### #t

value: `string`



### autopause

value: `VimeoBoolean`



### autoplay

value: `VimeoBoolean`



### background

value: `VimeoBoolean`



### byline

value: `VimeoBoolean`



### color

value: `string`



### controls

value: `VimeoBoolean`



### dnt

value: `VimeoBoolean`



### loop

value: `VimeoBoolean`



### muted

value: `VimeoBoolean`



### pip

value: `VimeoBoolean`



### playsinline

value: `VimeoBoolean`



### portrait

value: `VimeoBoolean`



### quality

value: `'240p' | '360p' | '540p' | '720p' | '1080p' | '2k' | '4k'`



### speed

value: `VimeoBoolean`



### texttrack

value: `string`



### title

value: `VimeoBoolean`



### transparent

value: `VimeoBoolean`



### VimeoBoolean


0 | 1 | boolean

## Related
- [MediaFile](/api/hydrogen-react/components/mediafile)