AddThisFeature

Podcast Player Embed

Drop a real episode from your podcast feed onto a page, with artwork and show notes.

moderate Media & Video

What it adds

An embeddable block that pulls a chosen episode from a podcast feed and renders artwork, notes, and a player.

What your agent is told to do

5
  1. 1

    Let an editor paste a feed address once, then pick an episode from a list rather than pasting an episode URL. The picker is the whole point; a raw URL field puts the work back on the user.

  2. 2

    Render the audio through the app's existing Audio Player rather than embedding the host's own widget. A third-party iframe means their branding, their tracking, and their outage on your page.

  3. 3

    Read the feed on the server on a schedule and store what you render. Do not fetch the feed from the visitor's browser on every page view.

  4. 4

    Show artwork, episode title, publication date, duration, and show notes, and link out to the episode on its original host for people who want their own podcast app.

  5. 5

    Do not trust the show notes. Feeds carry arbitrary markup written by whoever runs the show; strip scripts, event handlers, and embedded frames, and allow only the small set of tags the notes actually need.

Edge cases it handles

8
  • Fetching the feed on every page view will get you rate limited or blocked by the host. Cache the parsed feed with a sensible refresh interval and serve the cached copy while a refresh runs in the background.
  • Feeds reorder themselves, republish episodes with new file addresses, and drop old episodes entirely. Match on the episode identifier the feed provides, not on position in the list, and keep showing a stored copy of an episode that has vanished rather than blanking the block.
  • Show notes arrive as untrusted markup and are the most likely injection route in this feature. Sanitise on the server before storage as well as on render, so a stored payload cannot leak through a later template change.
  • When the feed is unreachable, the block must still render the last known episode with its artwork and a working play link, not an empty box or a raw fetch error.
  • Long episodes make seek precision matter. A scrubber a few hundred pixels wide over a three-hour recording needs a fine-seek affordance or keyboard nudge, or listeners cannot land where they meant to.
  • Artwork comes from a remote host at unpredictable dimensions. Reserve the space before it loads so the page does not jump, and fall back to a placeholder rather than a broken image.
  • A feed address that is not a podcast feed, or that returns a login page, must fail at the point the editor pastes it, with a message saying what was wrong.
  • Very large feeds with hundreds of episodes need paging or search in the picker, and a parse limit so one enormous feed cannot exhaust memory.

Definition of done

9
  • An editor pastes a feed once and selects episodes from a list.
  • Feeds are fetched and parsed server-side on a schedule, not per page view.
  • Show notes are sanitised before storage and before render, and scripts and frames never survive.
  • An unreachable feed still renders the last known episode with artwork and playback.
  • Artwork space is reserved so the layout does not shift on load.
  • Playback uses the app's existing audio player, not a third-party embed.
  • An invalid or non-podcast feed address is rejected with a clear message at entry time.
  • The feature matches the existing design system.
  • No existing functionality is broken.

Related features

How it works

  1. 1

    Copy the link

    Grab the Markdown instruction URL for this feature.

  2. 2

    Give it to your AI

    Paste it into Claude Code, Cursor, v0, Lovable — whatever you build with.

  3. 3

    It inspects, then implements

    Your agent reads your existing app first, then adds the feature to fit it.

Works with your stack

These instructions are written to adapt. They tell the agent to detect your framework, match your existing design system, and reuse what you already have — rather than assuming a particular stack.

Need it tighter than that? Customize the feature and tell it exactly what you're running.