Embedded Player

The PodcasterPlus player is a self-contained web component you can put on any website. One script tag, one element: the player fetches everything it needs from the public API and renders a fully accessible audio player styled with the show's brand colour.

Anyone may embed any published PodcasterPlus show. No permission or account needed.

Use the script embed (recommended)

<script async src="https://embed.podcasterplus.com/player/v1.js"></script>
<podcasterplus-player
	episode="3f9d2b6e-8c41-4a57-b2f0-6e5d4c3b2a19"
	style="display:block;min-height:291px"
>
	<a href="https://listen.podcasterplus.com/acme-radio-hour/e/the-big-launch">
		Listen to The Big Launch on PodcasterPlus
	</a>
</podcasterplus-player>

The inline min-height reserves the player's exact final height before the script loads, so the embed causes no cumulative layout shift (CLS). Use 291px for the standard player and 101px for size="compact"; if your plan removes the "Powered by PodcasterPlus" footer, use 252px / 83px instead. The embed codes generated in the PodcasterPlus dashboard include the right value automatically.

Why the script embed is the recommended mode: the player renders in your page's DOM (inside an open shadow root), not in a cross-origin iframe. That's a real accessibility win: it follows your visitors' page zoom, user stylesheets, and high-contrast settings, and sits naturally in the page's focus order for keyboard and screen-reader users.

The link inside the element is progressive-enhancement fallback content: it shows until the script upgrades the element, remains for no-JS visitors, and is offered again if the episode can't be loaded. Always include one.

The script is versioned and safe to load once per page no matter how many players you place. It only ever receives backwards-compatible updates; breaking player changes would ship as a new URL (/player/v2.js). See versioning.

Element attributes

Attribute	Values	Default	Purpose
episode	episode UUID	(none)	Play one specific episode. Takes precedence over podcast
podcast	podcast slug	(none)	Latest-episode mode: always plays the show's newest published episode
theme	auto | light | dark	auto	auto follows the visitor's prefers-color-scheme
size	standard | compact	standard	standard is the full card; compact is a two-row inline bar
accent	#hex colour	(none)	Pin this embed's accent colour, overriding the show's player-colour setting
wave	true | false	true	false swaps the waveform scrubber for a plain progress bar
api	endpoint origin	production API	Endpoint override, for development and testing only

Provide either episode or podcast. Episode embeds reference the episode's UUID (find it in id from the API, or copy ready-made code from the dashboard's Share & embed card). UUIDs stay stable even if the podcaster later edits the episode's slug, so embeds pasted into third-party sites never break.

Player features

Play/pause, a waveform scrubber with an accessible seek slider (keyboard + spoken position), −15 s / +30 s skips, elapsed/total time, playback speed (0.75×–2×), mute, artwork, and a title line linking back to the episode's listen page. The full player adds download (saves the audio file, via a Content-Disposition attachment) and share (the visitor's native share sheet, with a copy-link fallback). The player integrates with the Media Session API (lock-screen metadata and controls) and uses preload="none", so no audio bytes are downloaded until the visitor presses play.

Accessibility is the point: every control is a real button with an accessible name, focus is visible, state changes are announced politely to screen readers, prefers-reduced-motion is respected, and colours are contrast-checked (see theming below).

Fall back to an iframe

Some platforms (hosted WordPress plans, Notion, and similar) strip <script> tags. For those, use the iframe pages; they wrap the exact same player:

<iframe
	src="https://embed.podcasterplus.com/ep/3f9d2b6e-8c41-4a57-b2f0-6e5d4c3b2a19"
	width="100%"
	height="300"
	style="max-width:600px;border:0;border-radius:12px"
	title="The Big Launch – audio player"
	loading="lazy"
	allow="autoplay"
></iframe>

Iframe page URLs:

URL	Plays
https://embed.podcasterplus.com/ep/{episodeId}	One episode (by UUID)
https://embed.podcasterplus.com/latest/{podcastSlug}	The show's newest episode

Both accept optional query parameters: ?theme= (auto/light/dark), ?size= (standard/compact), ?accent= (a hex colour, hash optional: accent=0e8f7e), and ?wave=false (plain progress bar). Unknown or invalid values fall back to the defaults. The pages carry a <noscript> native audio fallback, allow framing from any site, and set no cookies.

Iframe heights:

size	Height
standard	300
compact	110

Set width="100%" (with a max-width if you want); the player is fluid-width.

Embed via oEmbed

PodcasterPlus is an oEmbed provider. Platforms that support oEmbed discovery (WordPress embed blocks, for example) can turn a pasted listen-page URL into a player automatically:

• https://listen.podcasterplus.com/{podcastSlug} → latest-episode player
• https://listen.podcasterplus.com/{podcastSlug}/e/{episodeSlug} → that episode

The endpoint is GET https://api.podcasterplus.com/v1/oembed?url=…&format=json, and both listen-page shapes advertise it with a discovery <link> tag. Full parameter and response reference: oEmbed in the API reference. Only JSON responses are supported (format=xml returns 501).

Theme the player

Theme attribute. theme="auto" (default) follows the visitor's prefers-color-scheme; light and dark pin it.

Accent colour. The accent (play button, waveform, scrubber, focus rings) comes from the show's player colour: podcasters set it once in Settings → Distribution → Embed player, it's delivered by the API as player_color in the episode payload, and every embed follows it (falling back to the show's legacy brand_color, then the PodcasterPlus purple). You can pin an individual embed to its own colour with accent="#hex"; a pinned embed keeps its colour even if the show-wide setting later changes. The "Powered by PodcasterPlus" wordmark never recolours: it stays brand purple in the light theme and switches to white in the dark theme.

Contrast safety. Whatever colour arrives (from the API or your accent override), the player nudges it toward black or white until it reaches at least 3:1 contrast against the active theme background, and it renders text and icons on the accent in black or white, whichever reads better. A pale brand yellow on a white background will be darkened until it's usable; you never have to worry about an unreadable player.

Pick a size

Size	Layout	Script embed	Iframe height
standard	Card: artwork, title + show line, waveform, full transport, download + share	size="standard" (default)	300
compact	Two-row bar: artwork, title + time, full transport with inline waveform	size="compact"	110

Both sizes are fluid-width, so they fill whatever container you give them.

About "Powered by PodcasterPlus"

Players show a small "Powered by PodcasterPlus" footer by default. Whether it appears is controlled by the show's owner (it's the branding.show_powered_by field in the API payload), not by the embedding site. See the help-center guide for how show owners on Creator plans and up can remove it.

Get embed code without writing it

Show owners can copy ready-made, correctly escaped embed code (with theme and size pickers and a live preview) from the dashboard: per-episode from the episode editor's Share & embed card, and show-level from Settings → Distribution → Embed player. See Share and embed your episodes.