# ExternalVideo

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

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


## Related

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