---
title: "Embedded player"
description: "Change the player's colors, controls and transcript panel so an embedded recording matches the page it sits on."
---

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

# Embedded player

The player you [embed on your site](/help/sharing/links/) carries your colors, fonts, and logo, and you can control what it shows and how it starts. Branding is set once in the dashboard and applies to your embeds. Playback behavior is set per embed with URL parameters.

![An embedded player on its own shared page. The recording title sits above the player, which carries play, skip back and skip forward controls, a counter reading 00:00 of 00:32, a speed control and a volume control. Below sit a transcript search box and an Auto scroll toggle, then the transcript itself, attributed to Speaker 1 and timestamped line by line.](/help/media/sharing/sharing-player.jpg)
## Brand the player

Open [Shared Media → Settings → Branding & Customization](https://app.speakai.co/embed-media) and set:

- **Primary color** for buttons and highlights, and the font color
- **Theme**, either light or dark as the base
- **Font family**, chosen from the available fonts, so the player matches your site
- **Logo and background image**, uploaded from your own files
- **Waveform**, hidden if you want a plainer player
- **Title and description**, hidden if the surrounding page already says what the recording is
- **Insights**, ticked one by one to choose which appear next to the recording
- **Downloads**, allowing viewers to download your data visualizations
- **Search engine indexing**, allowing the shared page to be indexed
- **Call to action**, a button that sends viewers where you want them to go next

Click **Save** when you are done. Changes apply to your embedded players.

## Custom CSS

For control past those settings, use the **Custom CSS** field in the same settings screen. Enter standard CSS to override specific styles:

```css
.sp-recorder-btn {
border-radius: 20px;
font-weight: bold;
}
```

The player updates as you type.

## Set the starting state with URL parameters

Append parameters to the embed URL to control how the player loads:

- `?autoplay=true` starts playback automatically, if the browser allows it
- `?t=120` starts playback at a set time in seconds, here two minutes
- `?hideWaveform=true` hides the waveform

### Side by side layout

To put the player and the transcript side by side, add `isHorizontal=true` with the width you want for each panel. The two widths are percentages and have to add up to 100:

```text
https://embed.speakai.co/iframe/your-media-slug?isHorizontal=true&playerWidth=70&transcriptWidth=30
```

Find the `src` on your iframe and add the parameters to the end of that URL. This layout applies to iframe embeds only.

## React to player events

The embed sends messages to the page around it using the browser `postMessage` API, so you can pause, play, or react from your own code:

- `ready` fires when the player has finished loading
- `finish` fires when playback has completed

If your security policies block these messages, add your domain to the allowed list in the recorder settings.

Want a hand setting this up? [Book a free consult](https://calendly.com/speak-ai/consult?utm_source=docs&utm_campaign=consult) and we'll do it together on your account.

---
Related: [Sharing](/help/sharing/) · [Clips](/help/sharing/clips/)

Source: https://docs.speakai.co/help/sharing/player/index.mdx