---
title: ExternalVideo
description: >-
  The ExternalVideo component renders an embedded video for the Storefront API's
  ExternalVideo object.
api_version: 2026-04
api_name: hydrogen-react
source_url:
  html: >-
    https://shopify.dev/docs/api/hydrogen-react/latest/components/media/externalvideo
  md: >-
    https://shopify.dev/docs/api/hydrogen-react/latest/components/media/externalvideo.md
---

# ExternalVideo

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

### Vimeo

* \#t

  ```ts
  string
  ```

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

* texttrack

  ```ts
  string
  ```

* title

  ```ts
  VimeoBoolean
  ```

* transparent

  ```ts
  VimeoBoolean
  ```

### VimeoBoolean

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

Examples

### Examples

* #### ExternalVideo example

  ##### Description

  I am the default example

  ##### JavaScript

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

  ##### TypeScript

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

***

## Related

[- MediaFile](https://shopify.dev/docs/api/hydrogen-react/2026-04/components/media/mediafile)

***