---
title: ExternalVideo
description: >-
  The `ExternalVideo` component renders an embedded video for the Storefront
  API's [ExternalVideo
  object](https://shopify.dev/api/storefront/reference/products/externalvideo).
api_version: 2023-10
api_name: hydrogen
source_url:
  html: 'https://shopify.dev/docs/api/hydrogen/2023-10/components/externalvideo'
  md: 'https://shopify.dev/docs/api/hydrogen/2023-10/components/externalvideo.md'
---

# External​Video

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

## Props

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

* data

  PartialDeep\<ExternalVideoType, {recurseIntoArrays: true}>

  required

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

* options

  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

  ```ts
  0 | 1
  ```

* cc\_lang\_pref

  ```ts
  string
  ```

* cc\_load\_policy

  ```ts
  1
  ```

* color

  ```ts
  "red" | "white"
  ```

* controls

  ```ts
  0 | 1
  ```

* disablekb

  ```ts
  0 | 1
  ```

* enablejsapi

  ```ts
  0 | 1
  ```

* end

  ```ts
  number
  ```

* fs

  ```ts
  0 | 1
  ```

* hl

  ```ts
  string
  ```

* iv\_load\_policy

  ```ts
  1 | 3
  ```

* list

  ```ts
  string
  ```

* list\_type

  ```ts
  "playlist" | "user_uploads"
  ```

* loop

  ```ts
  0 | 1
  ```

* modest\_branding

  ```ts
  1
  ```

* origin

  ```ts
  string
  ```

* playlist

  ```ts
  string
  ```

* plays\_inline

  ```ts
  0 | 1
  ```

* rel

  ```ts
  0 | 1
  ```

* start

  ```ts
  number
  ```

* widget\_referrer

  ```ts
  string
  ```

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

* autopause

  ```ts
  VimeoBoolean
  ```

* autoplay

  ```ts
  VimeoBoolean
  ```

* background

  ```ts
  VimeoBoolean
  ```

* byline

  ```ts
  VimeoBoolean
  ```

* color

  ```ts
  string
  ```

* controls

  ```ts
  VimeoBoolean
  ```

* dnt

  ```ts
  VimeoBoolean
  ```

* loop

  ```ts
  VimeoBoolean
  ```

* muted

  ```ts
  VimeoBoolean
  ```

* pip

  ```ts
  VimeoBoolean
  ```

* playsinline

  ```ts
  VimeoBoolean
  ```

* portrait

  ```ts
  VimeoBoolean
  ```

* quality

  ```ts
  "240p" | "360p" | "540p" | "720p" | "1080p" | "2k" | "4k"
  ```

* speed

  ```ts
  VimeoBoolean
  ```

* \#t

  ```ts
  string
  ```

* texttrack

  ```ts
  string
  ```

* title

  ```ts
  VimeoBoolean
  ```

* transparent

  ```ts
  VimeoBoolean
  ```

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

```ts
0 | 1 | boolean
```

Examples

### Examples

* #### ExternalVideo example

  ##### Description

  I am the default example

  ##### JavaScript

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

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

## Related

[- MediaFile](https://shopify.dev/api/hydrogen/components/mediafile)