Embedded Media Blocks
Paste a video, map, or social link into content and get a proper embed instead of a URL.
What it adds
Recognition of pasted media URLs in the editor, rendered as responsive embeds with a safe fallback.
What your agent is told to do
5
What your agent is told to do
5-
1
Extend the app's existing Rich Text Editor or Markdown Editor with Preview to detect a pasted URL on its own line and offer to convert it to an embed. Do not add a separate embed editor beside the one authors already use.
-
2
Maintain an explicit allowlist of supported hosts. Resolve each pasted URL server-side into a stored block with a provider, an identifier, a title, a thumbnail, and an aspect ratio, so the published page does not depend on a live lookup.
-
3
Reuse the existing Media Aspect Ratio System to reserve the embed's space before it loads, and let the frame scale to the container width instead of a fixed pixel height.
-
4
Render a click-to-load placeholder showing the thumbnail and title, and only insert the third-party frame after the reader activates it or after consent is recorded through the existing Consent and Cookie Preferences.
-
5
Do not render an error when the host is unrecognised. Leave the URL as an ordinary link, since an author pasting a link to an unsupported site still meant it to be a link.
Edge cases it handles
8
Edge cases it handles
8- An unsupported or unreachable host must degrade to a plain link with the URL as its text. An error box in the middle of a published article is worse than the link the author typed.
- Third-party embed scripts set cookies and fingerprint the reader the moment they load. Hold the frame behind a placeholder until consent exists, or the app is loading trackers it has promised not to load.
- Fixed-height embeds break on narrow screens, either cropping the content or forcing horizontal scroll. Size embeds by aspect ratio against the available width.
- A source that is deleted, made private, or geo-restricted leaves a blank frame with no explanation. Keep the stored title and thumbnail and show them with a note that the media is unavailable.
- A dozen embeds on one page each pull in their own scripts and delay first render badly. Load only the embeds near the viewport and keep the rest as placeholders.
- Embeds need an accessible name. Give each frame a title from the stored metadata so a screen reader does not announce a nameless frame.
- URL resolution happens against a user-supplied address, so it must be restricted to the allowlisted hosts and blocked from reaching internal addresses.
- A pasted URL inside a sentence is a link, not an embed. Only convert a URL that stands alone on its own line.
Definition of done
9
Definition of done
9- Pasting a supported URL on its own line in the existing editor produces an embed block.
- Unsupported hosts render as plain links, never as errors.
- Embeds reserve their space by aspect ratio and cause no layout shift or horizontal scroll at 320px.
- No third-party script loads before the reader activates the embed or consent is recorded.
- Unavailable sources show the stored title and thumbnail with an explanation rather than an empty frame.
- A page with many embeds loads only those near the viewport.
- Every embed frame has an accessible title.
- The feature matches the existing design system.
- No existing functionality is broken.
Related features
Picture-in-Picture Mode
Picture-in-Picture Mode
Let viewers pop a video into a floating window and keep using the rest of the app.
What it does
A control on the video player that hands the video to the browser's floating always-on-top window.
How it works
- 1 Add the control to the app's existing video player rather than building a separate popped-out player. Two players competing over the same element is the main way this feature goes wrong.
- 2 Keep the app in sync with the floating window in both directions. Pausing, seeking, or changing volume from the floating window must update the in-page player, and closing the floating window must return playback to the page at the same position.
- 3 Decide explicitly what happens when the user navigates away from the page that owns the video. Either keep the floating window alive and reconnect when they return, or end it cleanly, but do not leave a floating window playing a video the app has forgotten about.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/picture-in-picture-mode
Audio Waveform Scrubber
Audio Waveform Scrubber
Show the shape of a track so listeners can see the quiet and loud parts and click to them.
What it does
A waveform rendered from precomputed amplitude data, doubling as the seek control on the audio player.
How it works
- 1 Compute the amplitude data on the server when the file is first stored, and serve it as a small dataset the page can draw. Do not decode the audio in the browser to build the waveform.
- 2 Replace the plain scrub bar in the app's existing Audio Player with this surface rather than adding a second seek control beside it.
- 3 Draw played and unplayed regions distinctly, and keep the playhead position exact under click, drag, and keyboard seeking on the same surface.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/audio-waveform-scrubber
Hover Video Preview
Hover Video Preview
Hovering a video card plays a short silent clip so people see what it is before clicking.
What it does
A silent, short-loop preview that plays inside a video card on deliberate hover and returns to the poster on exit.
How it works
- 1 Generate a short, low-resolution, silent preview clip during video processing and store it alongside the poster frame. Do not play the full source file behind the card.
- 2 Require a deliberate hover before doing anything. Wait several hundred milliseconds after the pointer settles, then load, so a cursor crossing a grid does not fire a dozen requests.
- 3 Give touch devices an explicit preview control on the card, since hover does not exist there. A long-press or a small preview button is fine; silently doing nothing on mobile is not.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/hover-video-preview
How it works
-
1
Copy the link
Grab the Markdown instruction URL for this feature.
-
2
Give it to your AI
Paste it into Claude Code, Cursor, v0, Lovable — whatever you build with.
-
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.