astro-website/openspec/changes/reduce-bounce-rate/proposal.md

Why

Content cards on the homepage, videos page, and podcast page currently link directly to YouTube/Spotify as outbound links (target="_blank"). Every click immediately sends the user off-site, inflating bounce rate and cutting short time-on-site. Embedding media in an in-page modal keeps users on the site longer while still providing clear CTAs to the canonical platform when they're ready.

What Changes

• Content cards become modal triggers instead of outbound links. Clicking a video or podcast card on the homepage, /videos, or /podcast opens a modal dialog with an embedded player — the user stays on-site.
• New modal dialog component. An accessible modal overlay that renders:
  • Title (top-left) and a close button (top-right)
  • Embedded YouTube iframe or Spotify embed player (based on content source)
  • Description / summary text
  • Date and view count (live count if YouTube API key is configured)
  • "Follow on YouTube/Spotify" CTA and "View on YouTube/Spotify" CTA
• Playback lifecycle tied to modal. Closing the modal (close button or Escape key) MUST stop media playback — no audio/video continues after the modal is dismissed.
• Umami event taxonomy update. Card clicks on listing pages are no longer outbound — event names change from outbound_click to a new interaction event. New events are added for modal open, modal close, follow CTA, view-on-platform CTA, and (stretch) engagement duration.

Capabilities

New Capabilities

• media-modal: Accessible modal dialog component that embeds YouTube/Spotify players, displays content metadata, provides platform CTAs, and manages playback lifecycle (stop on close/escape).

Modified Capabilities

• card-layout-system: Cards for video/podcast content become modal triggers instead of outbound <a> links. The card visual layout stays the same; the interaction target changes.
• interaction-tracking-taxonomy: Card clicks are no longer outbound_click — a new event category is needed for in-page media previews. New tracked interactions: modal open, modal close, modal CTA clicks (follow, view-on-platform). Stretch: engagement duration tracking.
• analytics-umami: New event names and properties must be emitted for modal interactions using the existing data-umami-event-* attribute pattern.
• conversion-ctas: New CTA instances inside the modal ("Follow on YouTube/Spotify", "View on YouTube/Spotify") must follow the existing CtaLink tracking conventions.

Impact

• Components: ContentCard.astro, StandardCard.astro — card click behavior changes from outbound link to modal trigger on video/podcast sources (Instagram cards are unaffected).
• New component: A MediaModal component (likely client-side JS/Astro island) for the dialog, embed player, and playback control.
• Pages: index.astro, videos.astro, podcast.astro — must mount the modal and wire card click handlers.
• Analytics: All data-umami-event="outbound_click" on video/podcast content cards change to a non-outbound event. New events added for modal interactions.
• Accessibility: Modal must follow WCAG 2.2 AA patterns already established in wcag-responsive-ui spec — focus trap, Escape to close, aria-modal, focus return on dismiss.
• No backend changes. Content ingestion, caching, and data model (ContentItem) are unchanged. YouTube embed IDs are derivable from existing item.url. Spotify embed URLs are derivable from existing item.url.
• No breaking changes. Detail pages (/videos/[id], /podcast/[id]) remain as-is for SEO/sharing. The modal is an additive UX layer on listing surfaces only.