diff --git a/src/app/components/url-preview/UrlPreview.css.tsx b/src/app/components/url-preview/UrlPreview.css.tsx
index 480a4eb96..52d6d8b82 100644
--- a/src/app/components/url-preview/UrlPreview.css.tsx
+++ b/src/app/components/url-preview/UrlPreview.css.tsx
@@ -271,6 +271,17 @@ export const EmbedPlaceholder = style([
   },
 ]);
 
+// Audio embeds (Spotify / SoundCloud) — full-width, short fixed height (set inline).
+export const EmbedMediaAudio = style([
+  DefaultReset,
+  {
+    position: 'relative',
+    width: '100%',
+    overflow: 'hidden',
+    backgroundColor: color.Surface.Container,
+  },
+]);
+
 // ---------------------------------------------------------------------------
 // Shared square artwork thumbnail (Spotify, IMDb poster, Discord icon)
 // ---------------------------------------------------------------------------
@@ -389,6 +400,21 @@ export const BadgeTikTok = style({
   color: '#ffffff',
 });
 
+export const BadgeSoundCloud = style({
+  backgroundColor: '#ff5500',
+  color: '#ffffff',
+});
+
+export const BadgeDailymotion = style({
+  backgroundColor: '#0066dc',
+  color: '#ffffff',
+});
+
+export const BadgeStreamable = style({
+  backgroundColor: '#0f90fa',
+  color: '#ffffff',
+});
+
 // ---------------------------------------------------------------------------
 // Twitch LIVE badge
 // ---------------------------------------------------------------------------
diff --git a/src/app/components/url-preview/UrlPreviewCard.tsx b/src/app/components/url-preview/UrlPreviewCard.tsx
index 7ba148479..d1882fa4d 100644
--- a/src/app/components/url-preview/UrlPreviewCard.tsx
+++ b/src/app/components/url-preview/UrlPreviewCard.tsx
@@ -19,14 +19,7 @@ import { ImageViewer } from '../image-viewer';
 import { onEnterOrSpace } from '../../utils/keyboard';
 import { useSetting } from '../../state/hooks/settings';
 import { settingsAtom } from '../../state/settings';
-import {
-  buildVideoEmbedUrl,
-  getVimeoVideoId,
-  getYouTubeVideoId,
-  getYoutubeShortsId,
-  isYouTubeShorts,
-  VideoEmbedProvider,
-} from '../../utils/videoEmbed';
+import { MediaEmbed, parseMediaEmbed } from '../../utils/videoEmbed';
 
 const linkStyles = { color: color.Success.Main };
 
@@ -35,10 +28,7 @@ const linkStyles = { color: color.Success.Main };
 // ---------------------------------------------------------------------------
 
 type CardVariant =
-  | 'youtube-shorts'
-  | 'youtube'
   | 'tiktok'
-  | 'vimeo'
   | 'github'
   | 'twitter'
   | 'reddit'
@@ -283,11 +273,10 @@ function isTenor(url: string): boolean {
 }
 
 function getCardVariant(url: string): CardVariant {
-  // Shorts must be detected before generic youtube
-  if (isYouTubeShorts(url)) return 'youtube-shorts';
-  if (getYouTubeVideoId(url) !== null) return 'youtube';
+  // NOTE: embeddable providers (YouTube/Vimeo/TikTok/Spotify/Twitch/…) are handled
+  // upstream by parseMediaEmbed + MediaEmbedCard; getCardVariant only routes the
+  // non-embed fallbacks (incl. TikTok short links with no resolvable id).
   if (isTikTok(url)) return 'tiktok';
-  if (getVimeoVideoId(url) !== null) return 'vimeo';
   if (isGitHubRepo(url)) return 'github';
   if (isTwitter(url)) return 'twitter';
   if (getRedditSubreddit(url) !== null) return 'reddit';
@@ -435,25 +424,7 @@ function SiteBadge({ label, colorClass }: { label: string; colorClass: string })
 }
 
 // ---------------------------------------------------------------------------
-// Card 1: YouTube Shorts
-// ---------------------------------------------------------------------------
-
-function YouTubeShortsCard({ url, prev }: { url: string; prev: IPreviewUrlResponse }) {
-  return (
-    <VideoEmbedCard
-      url={url}
-      prev={prev}
-      provider="youtube"
-      videoId={getYoutubeShortsId(url) ?? ''}
-      portrait
-      siteBadgeLabel="Shorts"
-      siteBadgeClass={previewCss.BadgeYouTubeShorts}
-    />
-  );
-}
-
-// ---------------------------------------------------------------------------
-// Card 2: TikTok
+// Card: TikTok (fallback for short vm.tiktok.com links that can't resolve an id)
 // ---------------------------------------------------------------------------
 
 function TikTokCard({
@@ -922,22 +893,30 @@ function RedditCard({
 // in the (cookie-less) YouTube / Vimeo iframe, so nothing loads from the third
 // party until the user presses play. Gated by the `inlineMediaEmbeds` setting —
 // when off it falls back to a link that opens the video in a new tab.
-function VideoEmbedCard({
+const EMBED_BADGE: Record<string, { label: string; class: string }> = {
+  youtube: { label: 'YouTube', class: '' },
+  vimeo: { label: 'Vimeo', class: previewCss.BadgeVimeo },
+  tiktok: { label: 'TikTok', class: previewCss.BadgeTikTok },
+  dailymotion: { label: 'Dailymotion', class: previewCss.BadgeDailymotion },
+  streamable: { label: 'Streamable', class: previewCss.BadgeStreamable },
+  twitch: { label: 'Twitch', class: previewCss.BadgeTwitchPurple },
+  spotify: { label: 'Spotify', class: previewCss.BadgeSpotify },
+  soundcloud: { label: 'SoundCloud', class: previewCss.BadgeSoundCloud },
+};
+
+// One media-forward tile for every embeddable provider (video / portrait / audio).
+// Privacy-friendly facade: shows the homeserver's cached thumbnail + a play
+// button; only on click does it swap in the provider iframe, so nothing loads
+// from the third party until the user presses play. Gated by `inlineMediaEmbeds`
+// — when off it falls back to a link that opens the media in a new tab.
+function MediaEmbedCard({
   url,
   prev,
-  provider,
-  videoId,
-  portrait,
-  siteBadgeLabel,
-  siteBadgeClass,
+  embed,
 }: {
   url: string;
   prev: IPreviewUrlResponse;
-  provider: VideoEmbedProvider;
-  videoId: string;
-  portrait?: boolean;
-  siteBadgeLabel: string;
-  siteBadgeClass: string;
+  embed: MediaEmbed;
 }) {
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
@@ -947,6 +926,8 @@ function VideoEmbedCard({
   const title = prev['og:title'] ?? '';
   const description = prev['og:description'] ?? '';
   const mxcImage = prev['og:image'] as string | undefined;
+  const portrait = embed.kind === 'portrait';
+  const audio = embed.kind === 'audio';
   const thumbnailUrl = mxcImage
     ? mxcUrlToHttp(
         mx,
@@ -959,7 +940,18 @@ function VideoEmbedCard({
       )
     : undefined;
 
-  const mediaClass = portrait ? previewCss.EmbedMediaPortrait : previewCss.EmbedMediaLandscape;
+  // Shorts share the youtube provider but get their own badge.
+  const badge =
+    embed.provider === 'youtube' && portrait
+      ? { label: 'Shorts', class: previewCss.BadgeYouTubeShorts }
+      : (EMBED_BADGE[embed.provider] ?? { label: embed.provider, class: '' });
+
+  const mediaClass = audio
+    ? previewCss.EmbedMediaAudio
+    : portrait
+      ? previewCss.EmbedMediaPortrait
+      : previewCss.EmbedMediaLandscape;
+  const mediaStyle = audio ? { height: `${embed.height ?? 152}px` } : undefined;
 
   const thumb = thumbnailUrl ? (
     <img className={previewCss.MediaThumbnailImg} src={thumbnailUrl} alt={title} loading="lazy" />
@@ -978,12 +970,12 @@ function VideoEmbedCard({
 
   return (
     <Box direction="Column">
-      <div className={mediaClass}>
+      <div className={mediaClass} style={mediaStyle}>
         {playing ? (
           <iframe
             className={previewCss.EmbedIframe}
-            src={buildVideoEmbedUrl(provider, videoId)}
-            title={title || siteBadgeLabel}
+            src={embed.embedUrl}
+            title={title || badge.label}
             allow="autoplay; encrypted-media; picture-in-picture; fullscreen; clipboard-write"
             sandbox="allow-scripts allow-same-origin allow-popups allow-presentation"
             allowFullScreen
@@ -994,7 +986,7 @@ function VideoEmbedCard({
             type="button"
             className={previewCss.EmbedFacade}
             onClick={() => setPlaying(true)}
-            aria-label={`Play: ${title || siteBadgeLabel}`}
+            aria-label={`Play: ${title || badge.label}`}
           >
             {thumb}
             {playOverlay}
@@ -1005,7 +997,7 @@ function VideoEmbedCard({
             target="_blank"
             rel="noreferrer"
             className={previewCss.EmbedFacade}
-            aria-label={`Watch on ${siteBadgeLabel}: ${title}`}
+            aria-label={`Open on ${badge.label}: ${title}`}
           >
             {thumb}
             {playOverlay}
@@ -1023,7 +1015,7 @@ function VideoEmbedCard({
           size="T200"
           priority="300"
         >
-          <SiteBadge label={siteBadgeLabel} colorClass={siteBadgeClass} />
+          <SiteBadge label={badge.label} colorClass={badge.class} />
         </Text>
         {title && (
           <Text truncate priority="400">
@@ -1040,32 +1032,6 @@ function VideoEmbedCard({
   );
 }
 
-function YouTubeCard({ url, prev }: { url: string; prev: IPreviewUrlResponse }) {
-  return (
-    <VideoEmbedCard
-      url={url}
-      prev={prev}
-      provider="youtube"
-      videoId={getYouTubeVideoId(url) ?? ''}
-      siteBadgeLabel="YouTube"
-      siteBadgeClass=""
-    />
-  );
-}
-
-function VimeoCard({ url, prev }: { url: string; prev: IPreviewUrlResponse }) {
-  return (
-    <VideoEmbedCard
-      url={url}
-      prev={prev}
-      provider="vimeo"
-      videoId={getVimeoVideoId(url) ?? ''}
-      siteBadgeLabel="Vimeo"
-      siteBadgeClass={previewCss.BadgeVimeo}
-    />
-  );
-}
-
 function GitHubCard({ url, prev }: { url: string; prev: IPreviewUrlResponse }) {
   const title = prev['og:title'] ?? '';
   const description = prev['og:description'] ?? '';
@@ -1672,17 +1638,18 @@ export const UrlPreviewCard = as<'div', { url: string; ts: number }>(
     if (previewStatus.status === AsyncStatus.Error) return null;
 
     const renderContent = (prev: IPreviewUrlResponse): React.ReactNode => {
+      // Embeddable media (YouTube/Vimeo/TikTok/Dailymotion/Streamable/Twitch/
+      // Spotify/SoundCloud) gets the media-forward click-to-play tile.
+      const embed = parseMediaEmbed(url, window.location.hostname);
+      if (embed) {
+        return <MediaEmbedCard url={url} prev={prev} embed={embed} />;
+      }
+
       const variant = getCardVariant(url);
 
       switch (variant) {
-        case 'youtube-shorts':
-          return <YouTubeShortsCard url={url} prev={prev} />;
-        case 'youtube':
-          return <YouTubeCard url={url} prev={prev} />;
         case 'tiktok':
           return <TikTokCard url={url} prev={prev} mx={mx} useAuthentication={useAuthentication} />;
-        case 'vimeo':
-          return <VimeoCard url={url} prev={prev} />;
         case 'github':
           return <GitHubCard url={url} prev={prev} />;
         case 'twitter':
diff --git a/src/app/features/settings/general/General.tsx b/src/app/features/settings/general/General.tsx
index 5b09b0e25..8d660baf2 100644
--- a/src/app/features/settings/general/General.tsx
+++ b/src/app/features/settings/general/General.tsx
@@ -2348,7 +2348,7 @@ function Messages() {
       <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
         <SettingTile
           title="Inline Media Players"
-          description="Play YouTube and Vimeo links right in the chat. Nothing loads from the video site until you press play."
+          description="Play YouTube, Vimeo, TikTok, Twitch, Spotify and more right in the chat. Nothing loads from the third-party site until you press play."
           after={
             <Switch variant="Primary" value={inlineMediaEmbeds} onChange={setInlineMediaEmbeds} />
           }
diff --git a/src/app/utils/videoEmbed.test.ts b/src/app/utils/videoEmbed.test.ts
index 6a80cfb3f..46df46fc9 100644
--- a/src/app/utils/videoEmbed.test.ts
+++ b/src/app/utils/videoEmbed.test.ts
@@ -5,65 +5,115 @@ import {
   getYoutubeShortsId,
   isYouTubeShorts,
   getVimeoVideoId,
-  parseVideoEmbed,
+  getTikTokVideoId,
+  getDailymotionId,
+  getStreamableId,
+  getTwitchTarget,
+  getSpotifyEmbedTarget,
+  isSoundCloudTrack,
   buildVideoEmbedUrl,
+  spotifyEmbedHeight,
+  parseMediaEmbed,
 } from './videoEmbed';
 
-test('getYouTubeVideoId: watch / youtu.be / embed / shorts', () => {
+const HOST = 'chat.lotusguild.org';
+
+test('YouTube: watch / youtu.be / embed / shorts', () => {
   assert.equal(getYouTubeVideoId('https://www.youtube.com/watch?v=dQw4w9WgXcQ'), 'dQw4w9WgXcQ');
-  assert.equal(getYouTubeVideoId('https://youtu.be/dQw4w9WgXcQ'), 'dQw4w9WgXcQ');
   assert.equal(getYouTubeVideoId('https://youtu.be/dQw4w9WgXcQ?t=42'), 'dQw4w9WgXcQ');
   assert.equal(getYouTubeVideoId('https://www.youtube.com/embed/dQw4w9WgXcQ'), 'dQw4w9WgXcQ');
   assert.equal(getYouTubeVideoId('https://youtube.com/shorts/abc123DEF_-'), 'abc123DEF_-');
-});
-
-test('getYouTubeVideoId: non-YouTube / malformed → null', () => {
   assert.equal(getYouTubeVideoId('https://vimeo.com/123'), null);
-  assert.equal(getYouTubeVideoId('not a url'), null);
-  assert.equal(getYouTubeVideoId('https://www.youtube.com/'), null);
-});
-
-test('Shorts detection', () => {
   assert.equal(isYouTubeShorts('https://www.youtube.com/shorts/abc123'), true);
-  assert.equal(isYouTubeShorts('https://www.youtube.com/watch?v=abc123'), false);
   assert.equal(getYoutubeShortsId('https://youtube.com/shorts/abc123'), 'abc123');
 });
 
-test('getVimeoVideoId', () => {
+test('Vimeo', () => {
   assert.equal(getVimeoVideoId('https://vimeo.com/123456789'), '123456789');
-  assert.equal(getVimeoVideoId('https://vimeo.com/123456789/abcdef'), '123456789');
   assert.equal(getVimeoVideoId('https://vimeo.com/channels/staffpicks'), null);
-  assert.equal(getVimeoVideoId('https://youtube.com/watch?v=x'), null);
 });
 
-test('parseVideoEmbed: routes provider + portrait for shorts', () => {
-  assert.deepEqual(parseVideoEmbed('https://youtube.com/shorts/abc'), {
-    provider: 'youtube',
-    id: 'abc',
-    portrait: true,
+test('TikTok: canonical /video/<id> only', () => {
+  assert.equal(getTikTokVideoId('https://www.tiktok.com/@user/video/7234567890123456789'), '7234567890123456789');
+  assert.equal(getTikTokVideoId('https://vm.tiktok.com/ZMabc/'), null); // short link redirects
+  assert.equal(getTikTokVideoId('https://www.tiktok.com/@user'), null);
+});
+
+test('Dailymotion + Streamable', () => {
+  assert.equal(getDailymotionId('https://www.dailymotion.com/video/x8abcde'), 'x8abcde');
+  assert.equal(getDailymotionId('https://dai.ly/x8abcde'), 'x8abcde');
+  assert.equal(getStreamableId('https://streamable.com/abc12'), 'abc12');
+  assert.equal(getStreamableId('https://streamable.com/e/abc12'), null); // already an embed path
+});
+
+test('Twitch: channel / video / clip', () => {
+  assert.deepEqual(getTwitchTarget('https://www.twitch.tv/somestreamer'), {
+    type: 'channel',
+    value: 'somestreamer',
   });
-  assert.deepEqual(parseVideoEmbed('https://www.youtube.com/watch?v=xyz'), {
-    provider: 'youtube',
+  assert.deepEqual(getTwitchTarget('https://www.twitch.tv/videos/123456789'), {
+    type: 'video',
+    value: '123456789',
+  });
+  assert.deepEqual(getTwitchTarget('https://clips.twitch.tv/FunnyClipSlug'), {
+    type: 'clip',
+    value: 'FunnyClipSlug',
+  });
+  assert.deepEqual(getTwitchTarget('https://www.twitch.tv/streamer/clip/CoolSlug'), {
+    type: 'clip',
+    value: 'CoolSlug',
+  });
+});
+
+test('Spotify target + height', () => {
+  assert.deepEqual(getSpotifyEmbedTarget('https://open.spotify.com/track/4cOdK2wGLETKBW3PvgPWqT'), {
+    type: 'track',
+    id: '4cOdK2wGLETKBW3PvgPWqT',
+  });
+  assert.deepEqual(getSpotifyEmbedTarget('https://open.spotify.com/intl-de/album/xyz'), {
+    type: 'album',
     id: 'xyz',
-    portrait: false,
   });
-  assert.deepEqual(parseVideoEmbed('https://vimeo.com/42'), {
-    provider: 'vimeo',
-    id: '42',
-    portrait: false,
-  });
-  assert.equal(parseVideoEmbed('https://example.com/video'), null);
+  assert.equal(getSpotifyEmbedTarget('https://open.spotify.com/'), null);
+  assert.equal(spotifyEmbedHeight('track'), 152);
+  assert.equal(spotifyEmbedHeight('album'), 352);
 });
 
-test('buildVideoEmbedUrl: cookie-less YouTube + Vimeo, id encoded', () => {
+test('SoundCloud track detection', () => {
+  assert.equal(isSoundCloudTrack('https://soundcloud.com/artist/some-track'), true);
+  assert.equal(isSoundCloudTrack('https://soundcloud.com/artist'), false); // bare profile
+});
+
+test('buildVideoEmbedUrl: cookie-less YouTube + Vimeo', () => {
   assert.equal(
     buildVideoEmbedUrl('youtube', 'dQw4w9WgXcQ'),
     'https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ?autoplay=1&rel=0',
   );
-  assert.equal(
-    buildVideoEmbedUrl('vimeo', '123456789'),
-    'https://player.vimeo.com/video/123456789?autoplay=1',
-  );
-  // id is URL-encoded (defense-in-depth; ids are normally already safe)
-  assert.ok(buildVideoEmbedUrl('youtube', 'a/b').includes('a%2Fb'));
+  assert.equal(buildVideoEmbedUrl('vimeo', '42'), 'https://player.vimeo.com/video/42?autoplay=1');
+});
+
+test('parseMediaEmbed: routes provider + kind, builds embed URLs', () => {
+  assert.deepEqual(parseMediaEmbed('https://youtube.com/shorts/abc', HOST), {
+    provider: 'youtube',
+    kind: 'portrait',
+    embedUrl: 'https://www.youtube-nocookie.com/embed/abc?autoplay=1&rel=0',
+  });
+  assert.equal(parseMediaEmbed('https://www.youtube.com/watch?v=xyz', HOST)?.kind, 'landscape');
+  assert.equal(parseMediaEmbed('https://www.tiktok.com/@u/video/123', HOST)?.provider, 'tiktok');
+  assert.equal(parseMediaEmbed('https://www.tiktok.com/@u/video/123', HOST)?.kind, 'portrait');
+  assert.equal(parseMediaEmbed('https://streamable.com/abc', HOST)?.provider, 'streamable');
+  const spotify = parseMediaEmbed('https://open.spotify.com/track/abc', HOST);
+  assert.equal(spotify?.kind, 'audio');
+  assert.equal(spotify?.height, 152);
+  assert.equal(parseMediaEmbed('https://soundcloud.com/a/b', HOST)?.provider, 'soundcloud');
+  assert.equal(parseMediaEmbed('https://example.com/x', HOST), null);
+});
+
+test('parseMediaEmbed: Twitch embed carries the parent host', () => {
+  const chan = parseMediaEmbed('https://twitch.tv/streamer', HOST);
+  assert.equal(chan?.provider, 'twitch');
+  assert.ok(chan?.embedUrl.includes('channel=streamer'));
+  assert.ok(chan?.embedUrl.includes(`parent=${HOST}`));
+  const clip = parseMediaEmbed('https://clips.twitch.tv/Slug', HOST);
+  assert.ok(clip?.embedUrl.startsWith('https://clips.twitch.tv/embed?clip=Slug'));
 });
diff --git a/src/app/utils/videoEmbed.ts b/src/app/utils/videoEmbed.ts
index fcfe7acb7..dfab69a8f 100644
--- a/src/app/utils/videoEmbed.ts
+++ b/src/app/utils/videoEmbed.ts
@@ -1,35 +1,35 @@
-// Pure helpers for detecting embeddable video URLs (YouTube, Shorts, Vimeo) and
-// building their privacy-friendly embed URLs. No React/DOM/CSS imports so this
-// stays unit-testable in isolation.
+// Pure helpers for detecting embeddable media URLs and building their embed
+// URLs. No React/DOM/CSS imports so this stays unit-testable in isolation.
+//
+// "kind" drives how the card lays the embed out:
+//   landscape → 16:9 video      portrait → 9:16 video
+//   audio     → short fixed-height player (Spotify/SoundCloud)
 
-export type VideoEmbedProvider = 'youtube' | 'vimeo';
+export type EmbedKind = 'landscape' | 'portrait' | 'audio';
 
-export type VideoEmbed = {
-  provider: VideoEmbedProvider;
-  id: string;
-  portrait: boolean; // YouTube Shorts render 9:16
+export type MediaEmbed = {
+  provider: string;
+  kind: EmbedKind;
+  embedUrl: string;
+  /** Fixed pixel height for audio/rich embeds (aspect-ratio is used for video). */
+  height?: number;
 };
 
+// --- YouTube --------------------------------------------------------------
+
 export function getYouTubeVideoId(url: string): string | null {
   try {
     const { hostname, pathname, searchParams } = new URL(url);
-    // youtu.be/<id>
-    if (hostname === 'youtu.be') {
-      const id = pathname.slice(1).split('/')[0];
-      return id || null;
-    }
+    if (hostname === 'youtu.be') return pathname.slice(1).split('/')[0] || null;
     if (hostname === 'www.youtube.com' || hostname === 'youtube.com') {
-      // youtube.com/watch?v=<id>
       if (pathname === '/watch') return searchParams.get('v');
-      // youtube.com/embed/<id>
       const embedMatch = pathname.match(/^\/embed\/([A-Za-z0-9_-]+)/);
       if (embedMatch) return embedMatch[1];
-      // youtube.com/shorts/<id> (also matched by getYoutubeShortsId)
       const shortsMatch = pathname.match(/^\/shorts\/([A-Za-z0-9_-]+)/);
       if (shortsMatch) return shortsMatch[1];
     }
   } catch {
-    // ignore malformed URLs
+    /* ignore */
   }
   return null;
 }
@@ -55,6 +55,8 @@ export function getYoutubeShortsId(url: string): string | null {
   }
 }
 
+// --- Vimeo ----------------------------------------------------------------
+
 export function getVimeoVideoId(url: string): string | null {
   try {
     const { hostname, pathname } = new URL(url);
@@ -66,25 +68,191 @@ export function getVimeoVideoId(url: string): string | null {
   }
 }
 
-/** Detect an embeddable video from any URL, or null if it isn't one. */
-export function parseVideoEmbed(url: string): VideoEmbed | null {
-  const shortsId = getYoutubeShortsId(url);
-  if (shortsId) return { provider: 'youtube', id: shortsId, portrait: true };
-  const ytId = getYouTubeVideoId(url);
-  if (ytId) return { provider: 'youtube', id: ytId, portrait: false };
-  const vimeoId = getVimeoVideoId(url);
-  if (vimeoId) return { provider: 'vimeo', id: vimeoId, portrait: false };
+// --- TikTok ---------------------------------------------------------------
+
+/** Only resolvable for canonical /video/<id> links (short vm.tiktok.com links redirect). */
+export function getTikTokVideoId(url: string): string | null {
+  try {
+    const { hostname, pathname } = new URL(url);
+    const h = hostname.replace(/^www\./, '');
+    if (h !== 'tiktok.com') return null;
+    const m = pathname.match(/\/video\/(\d+)/);
+    return m ? m[1] : null;
+  } catch {
+    return null;
+  }
+}
+
+// --- Dailymotion ----------------------------------------------------------
+
+export function getDailymotionId(url: string): string | null {
+  try {
+    const { hostname, pathname } = new URL(url);
+    const h = hostname.replace(/^www\./, '');
+    if (h === 'dai.ly') return pathname.slice(1).split('/')[0] || null;
+    if (h === 'dailymotion.com') {
+      const m = pathname.match(/^\/video\/([A-Za-z0-9]+)/);
+      return m ? m[1] : null;
+    }
+  } catch {
+    /* ignore */
+  }
   return null;
 }
 
-/**
- * Build the click-to-play embed URL. YouTube uses the cookie-less
- * youtube-nocookie host so nothing is set until the user presses play.
- */
-export function buildVideoEmbedUrl(provider: VideoEmbedProvider, id: string): string {
-  const safeId = encodeURIComponent(id);
-  if (provider === 'vimeo') {
-    return `https://player.vimeo.com/video/${safeId}?autoplay=1`;
+// --- Streamable -----------------------------------------------------------
+
+export function getStreamableId(url: string): string | null {
+  try {
+    const { hostname, pathname } = new URL(url);
+    if (hostname.replace(/^www\./, '') !== 'streamable.com') return null;
+    const m = pathname.match(/^\/([A-Za-z0-9]+)/);
+    return m && m[1] !== 'e' ? m[1] : null;
+  } catch {
+    return null;
   }
-  return `https://www.youtube-nocookie.com/embed/${safeId}?autoplay=1&rel=0`;
+}
+
+// --- Twitch ---------------------------------------------------------------
+
+export type TwitchTarget =
+  | { type: 'channel'; value: string }
+  | { type: 'video'; value: string }
+  | { type: 'clip'; value: string };
+
+export function getTwitchTarget(url: string): TwitchTarget | null {
+  try {
+    const { hostname, pathname } = new URL(url);
+    const h = hostname.replace(/^www\./, '');
+    const parts = pathname.replace(/^\/+|\/+$/g, '').split('/');
+    if (h === 'clips.twitch.tv' && parts[0]) return { type: 'clip', value: parts[0] };
+    if (h === 'twitch.tv' || h === 'm.twitch.tv') {
+      if (parts[0] === 'videos' && parts[1]) return { type: 'video', value: parts[1] };
+      if (parts[1] === 'clip' && parts[2]) return { type: 'clip', value: parts[2] };
+      if (parts.length === 1 && parts[0]) return { type: 'channel', value: parts[0] };
+    }
+  } catch {
+    /* ignore */
+  }
+  return null;
+}
+
+// --- Spotify --------------------------------------------------------------
+
+const SPOTIFY_TYPES = ['track', 'album', 'playlist', 'episode', 'show', 'artist'] as const;
+export type SpotifyType = (typeof SPOTIFY_TYPES)[number];
+
+export function getSpotifyEmbedTarget(url: string): { type: SpotifyType; id: string } | null {
+  try {
+    const { hostname, pathname } = new URL(url);
+    if (hostname !== 'open.spotify.com') return null;
+    // /intl-xx/track/<id> or /track/<id>
+    const parts = pathname.replace(/^\/+/, '').split('/');
+    const idx = parts.findIndex((p) => (SPOTIFY_TYPES as readonly string[]).includes(p));
+    if (idx === -1 || !parts[idx + 1]) return null;
+    return { type: parts[idx] as SpotifyType, id: parts[idx + 1].split('?')[0] };
+  } catch {
+    return null;
+  }
+}
+
+// --- SoundCloud -----------------------------------------------------------
+
+export function isSoundCloudTrack(url: string): boolean {
+  try {
+    const { hostname, pathname } = new URL(url);
+    if (hostname.replace(/^www\./, '') !== 'soundcloud.com') return false;
+    // /<artist>/<track|sets/set> — at least two segments, not a bare profile
+    const parts = pathname.replace(/^\/+|\/+$/g, '').split('/').filter(Boolean);
+    return parts.length >= 2;
+  } catch {
+    return false;
+  }
+}
+
+// --- Embed-URL builders ---------------------------------------------------
+
+const enc = encodeURIComponent;
+
+export function buildVideoEmbedUrl(provider: 'youtube' | 'vimeo', id: string): string {
+  if (provider === 'vimeo') return `https://player.vimeo.com/video/${enc(id)}?autoplay=1`;
+  return `https://www.youtube-nocookie.com/embed/${enc(id)}?autoplay=1&rel=0`;
+}
+
+/** Spotify compact players (track/episode) are short; collections are taller. */
+export function spotifyEmbedHeight(type: SpotifyType): number {
+  return type === 'track' || type === 'episode' ? 152 : 352;
+}
+
+/**
+ * Resolve any supported media URL to an embed spec, or null if none applies.
+ * `host` is the current page hostname — required by Twitch's `parent` param.
+ */
+export function parseMediaEmbed(url: string, host: string): MediaEmbed | null {
+  const shortsId = getYoutubeShortsId(url);
+  if (shortsId)
+    return { provider: 'youtube', kind: 'portrait', embedUrl: buildVideoEmbedUrl('youtube', shortsId) };
+
+  const ytId = getYouTubeVideoId(url);
+  if (ytId)
+    return { provider: 'youtube', kind: 'landscape', embedUrl: buildVideoEmbedUrl('youtube', ytId) };
+
+  const vimeoId = getVimeoVideoId(url);
+  if (vimeoId)
+    return { provider: 'vimeo', kind: 'landscape', embedUrl: buildVideoEmbedUrl('vimeo', vimeoId) };
+
+  const tiktokId = getTikTokVideoId(url);
+  if (tiktokId)
+    return {
+      provider: 'tiktok',
+      kind: 'portrait',
+      embedUrl: `https://www.tiktok.com/player/v1/${enc(tiktokId)}?music_info=1&description=1&rel=0`,
+    };
+
+  const dmId = getDailymotionId(url);
+  if (dmId)
+    return {
+      provider: 'dailymotion',
+      kind: 'landscape',
+      embedUrl: `https://www.dailymotion.com/embed/video/${enc(dmId)}?autoplay=1`,
+    };
+
+  const streamableId = getStreamableId(url);
+  if (streamableId)
+    return {
+      provider: 'streamable',
+      kind: 'landscape',
+      embedUrl: `https://streamable.com/e/${enc(streamableId)}?autoplay=1`,
+    };
+
+  const twitch = getTwitchTarget(url);
+  if (twitch) {
+    const parent = enc(host);
+    const embedUrl =
+      twitch.type === 'clip'
+        ? `https://clips.twitch.tv/embed?clip=${enc(twitch.value)}&parent=${parent}&autoplay=true`
+        : `https://player.twitch.tv/?${twitch.type}=${enc(twitch.value)}&parent=${parent}&autoplay=true`;
+    return { provider: 'twitch', kind: 'landscape', embedUrl };
+  }
+
+  const spotify = getSpotifyEmbedTarget(url);
+  if (spotify)
+    return {
+      provider: 'spotify',
+      kind: 'audio',
+      embedUrl: `https://open.spotify.com/embed/${spotify.type}/${enc(spotify.id)}`,
+      height: spotifyEmbedHeight(spotify.type),
+    };
+
+  if (isSoundCloudTrack(url))
+    return {
+      provider: 'soundcloud',
+      kind: 'audio',
+      embedUrl: `https://w.soundcloud.com/player/?url=${enc(
+        url,
+      )}&color=%23ff5500&auto_play=true&show_comments=false&hide_related=true`,
+      height: 166,
+    };
+
+  return null;
 }