Embed video player

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.

The embed player supports public content only.

Get Started

The easiest way to get the embed code is directly from Motto Studio:

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

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

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:

<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

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

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

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

Next Steps

Enable video ads and pass ads=1 in your embed URL to monetize your embedded content.

Get Started

Streaming

CMS

OTT

Monetization

Assets

IAM

Embed video player

Introduction

Get Started

Query parameters

All embed types

Event and creative-work embeds

Example with autoplay

Listening to player events

Available event types

Content Protection

Next Steps

​Introduction

​Get Started

​Query parameters

​All embed types

​Event and creative-work embeds

​Example with autoplay

​Listening to player events

​Available event types

​Content Protection

​Next Steps

Introduction

Get Started

Query parameters

All embed types

Event and creative-work embeds

Example with autoplay

Listening to player events

Available event types

Content Protection

Next Steps