> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mottostreaming.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Embed video player

> Share your live and VOD content on your own website using a standard HTML iframe.

## Introduction

Motto's embeddable player lets you put any video, event, or creative work directly on your own website using a standard HTML `<iframe>` tag — no SDK or JavaScript required on your side.

The embed is served from Motto's infrastructure, so you do not need to host anything yourself. Your viewers can watch content in the iframe exactly as they would on a native Motto OTT platform, including ads and adaptive streaming.

<Note>
  The embed player supports public content only.
</Note>

## Get Started

The easiest way to get the embed code is directly from [Motto Studio](https://studio.mottostreaming.com):

1. Find the video or event you want to embed.
2. Open its options menu by clicking the three-dot icon on the item's row.

<Frame>
  <img src="https://assets.mottocdn.com/images/motto/Pwa5FIGpEpdggaudtnHYCsXZ_i" alt="Options menu with Embed video option" />
</Frame>

3. Click **Embed video**.
4. In the embed modal, click **Copy** to copy the ready-made HTML snippet.

<Frame>
  <img src="https://assets.mottocdn.com/images/motto/hIpKkGNm2ZChH70Te4BmiLZp_i" alt="Embed player modal with Copy button" />
</Frame>

5. Paste the copied snippet into your website's HTML.

That's it — the snippet already includes your content ID and public key. The sections below explain the available URL parameters and advanced options if you need to customize the embed further.

There are three embed types, each mapping to a content type in Motto:

| Type            | Content                              | URL pattern                       |
| --------------- | ------------------------------------ | --------------------------------- |
| `video`         | A single video or VOD                | `/video/{videoId}`                |
| `event`         | A live or recorded event             | `/event/{eventId}`                |
| `creative-work` | A creative work with multiple videos | `/creative-work/{creativeWorkId}` |

The copied snippet follows this structure. You can also build it manually by replacing the placeholder values with your content ID and public key:

```html theme={null}
<iframe
  src="https://embed.mottostreaming.com/video/{videoId}?publicKey={publicKey}"
  allow="autoplay; fullscreen; encrypted-media; picture-in-picture"
  allowfullscreen
  style="width:100%; aspect-ratio:16/9; border:0;"
></iframe>
```

The iframe fills its container width and maintains a 16:9 aspect ratio. To control the size, wrap it in a `<div>` with your desired width.

### Query parameters

#### All embed types

| Parameter   | Required | Description                                                                          |
| ----------- | -------- | ------------------------------------------------------------------------------------ |
| `publicKey` | yes      | Your Motto public key. Found in Studio under **Settings → API**.                     |
| `autoplay`  | no       | Set to `1` or `true` to autoplay on load. Requires `allow="autoplay"` on the iframe. |
| `ads`       | no       | Set to `1` or `true` to enable IMA video ads if configured on the content.           |
| `locale`    | no       | Language code for player UI strings, e.g. `en`, `es`, `fr`. Defaults to `en`.        |

#### Event and creative-work embeds

| Parameter            | Description                                                                                                                       |
| -------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
| `backgroundImageUrl` | URL of an image to display as the background on the pre-event screen. Only used when the event has no poster image set in Studio. |

#### Example with autoplay

```html theme={null}
<iframe
  src="https://embed.mottostreaming.com/event/{eventId}?publicKey={publicKey}&autoplay=1"
  allow="autoplay; fullscreen; encrypted-media; picture-in-picture"
  allowfullscreen
  style="width:100%; aspect-ratio:16/9; border:0;"
></iframe>
```

### Listening to player events

The embed player can notify your page about playback events using the browser's `postMessage` API. This is optional — the player works without it.

To listen for events, add a `message` event listener on your page:

```js theme={null}
window.addEventListener('message', (event) => {
  if (event.data?.source !== 'motto-embed') return;

  switch (event.data.type) {
    case 'play':
      console.log('Viewer started watching');
      break;
    case 'ended':
      console.log('Video finished');
      break;
    case 'error':
      console.error('Player error:', event.data.payload.message);
      break;
  }
});
```

#### Available event types

| Type              | Payload               | Description                                |
| ----------------- | --------------------- | ------------------------------------------ |
| `playerReady`     | —                     | Player is initialised and ready            |
| `loadStart`       | —                     | Video loading has begun                    |
| `canPlay`         | —                     | Video is ready to play                     |
| `play`            | —                     | Playback started                           |
| `pause`           | —                     | Playback paused                            |
| `ended`           | —                     | Video reached the end                      |
| `videoData`       | `VideoData` object    | Content metadata loaded from the API       |
| `emptyPlaylists`  | —                     | Content exists but has no playable streams |
| `error`           | `{ message: string }` | A player or API error occurred             |
| `adStart`         | —                     | An ad started playing                      |
| `adComplete`      | —                     | An ad finished                             |
| `adSkipped`       | —                     | Viewer skipped an ad                       |
| `allAdsCompleted` | —                     | All ads in the break completed             |

All events carry `{ source: 'motto-embed', type: string, payload?: object }`.

### Content Protection

By default, every website is allowed to embed your videos using the approach described here. However, this means it is
trivial for malicious actors to distribute your content by embedding it in their own website rather than yours.

To prevent this, you can use our [Domain Pinning](/guides/streaming/video-protection/domain-pinning) feature.
By doing so, only the domains that you configure will be allowed to embed your content. At a technical level, this is done
via a `Content-Security-Policy: frame-ancestors <domains>` header in the iframe page, which tells the user's browser
whether to allow loading the iframe.

<Note>If your website sets a `Content-Security-Policy: frame-src` header, add `frame-src https://embed.mottostreaming.com` to allow the iframe to load.</Note>

## Next Steps

* [Enable video ads](/guides/monetization/ads/video-ads) and pass `ads=1` in your embed URL to monetize your embedded content.