Skip to content

feat(markdown): support embedding YouTube and Kaltura videos via link-interception#5147

Draft
rschlaefli wants to merge 11 commits into
v3from
embed-external-video-support
Draft

feat(markdown): support embedding YouTube and Kaltura videos via link-interception#5147
rschlaefli wants to merge 11 commits into
v3from
embed-external-video-support

Conversation

@rschlaefli

@rschlaefli rschlaefli commented Jul 7, 2026

Copy link
Copy Markdown
Member

Description

Supports embedding videos from controlled sources (YouTube and UZH Kaltura/SWITCHcast) in Markdown fields by intercepting links labeled as video or embed.

For Kaltura, we use the SWITCHcast PlaykitJs embed endpoint to bypass the frame-based login loop entirely.

This implementation has been fully audited using droid running GLM 5.2 for security, accessibility (WCAG), type safety, and property-forwarding correctness.

Proposed Changes

  • packages/markdown/src/VideoEmbed.tsx:
    • Implements safe parsing helpers with strict value validation (getYoutubeId, getKalturaId, getKalturaPartnerId, getKalturaUiConfId).
    • Added strict domain validation for Kaltura (kaltura.com, *.kaltura.com, cast.switch.ch, *.cast.switch.ch) and strict character set validation for YouTube IDs (^[a-zA-Z0-9_-]{11}$).
    • Created the VideoEmbed React component rendering a responsive iframe with a screen-reader title and performance-optimizing loading="lazy".
  • packages/markdown/src/Markdown.tsx:
    • Modified the custom a anchor renderer in rehypeReact to render the embedded player when matching video URLs are encountered.
    • Trimmed label text to support varied formatting of link text like [video ](url).
    • Safely forwarded all standard anchor tag attributes (target, rel, ...rest) to preserve existing link-processing configurations like rehype-external-links.

Manual Verification / How to Test

  1. Embed a YouTube video using [video](https://www.youtube.com/watch?v=dQw4w9WgXcQ). It should render a responsive player wrapper with the YouTube iframe.
  2. Embed a Kaltura video using the hosted portal URL layout [video](https://uzh.mediaspace.cast.switch.ch/media/10+Untersuchung+Kopf+beim+Hund/0_ipqc15ga/124135). It should resolve the entryId and successfully render the Kaltura playkit login-bypass player iframe.
  3. Embed a Kaltura video using the raw embed code iframe URL [video](https://uzh.mediaspace.cast.switch.ch/embed/secure/iframe/entryId/0_um01ms1s/uiConfId/23449004/st/0). It should preserve the correct uiConfId and render the playkit player.
  4. Ensure other link configurations, e.g., [Link to YouTube](https://www.youtube.com/watch?v=dQw4w9WgXcQ), continue to render as regular hyperlinks with original properties (e.g. target="_blank").

@coderabbitai

coderabbitai Bot commented Jul 7, 2026

Copy link
Copy Markdown

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 08ead87d-27ca-47cd-96a9-94a2febdb19d

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@greptile-apps

greptile-apps Bot commented Jul 7, 2026

Copy link
Copy Markdown

Confidence Score: 4/5

This is close, but the remaining host check should be fixed before merging.

  • Regular links now keep their forwarded anchor attributes.
  • Kaltura lookalike hosts are rejected by the updated boundary checks.
  • The youtu.be check still accepts a lookalike domain and can turn that labeled link into an embed.

packages/markdown/src/VideoEmbed.tsx

Security Review

A remaining YouTube short-link host check can still accept lookalike domains ending in youtu.be.

Important Files Changed

Filename Overview
packages/markdown/src/VideoEmbed.tsx Adds video parsing helpers and iframe rendering, with one remaining short-domain host validation issue.
packages/markdown/src/Markdown.tsx Adds video link interception and preserves anchor props for regular links.
packages/markdown/test/VideoEmbed.test.ts Adds parser coverage for accepted video URLs and several rejected URL shapes.
packages/markdown/package.json Adds Vitest and a package test script.

Fix All in Codex Fix All in Claude Code

Reviews (10): Last reviewed commit: "test(markdown): add unit tests for Video..." | Re-trigger Greptile

Comment thread packages/markdown/src/VideoEmbed.tsx Outdated
Comment thread packages/markdown/src/VideoEmbed.tsx Outdated
Comment thread packages/markdown/src/Markdown.tsx Outdated
Comment thread packages/markdown/src/VideoEmbed.tsx
Comment thread packages/markdown/src/VideoEmbed.tsx Outdated
@gitguardian

gitguardian Bot commented Jul 7, 2026

Copy link
Copy Markdown

⚠️ GitGuardian has uncovered 2 secrets following the scan of your pull request.

Please consider investigating the findings and remediating the incidents. Failure to do so may lead to compromising the associated services or software components.

🔎 Detected hardcoded secrets in your pull request
GitGuardian id GitGuardian status Secret Commit Filename
1509424 Triggered Generic Password 14d3f11 .devcontainer/docker-compose.yml View secret
1509424 Triggered Generic Password 14d3f11 .devrouter.yml View secret
🛠 Guidelines to remediate hardcoded secrets
  1. Understand the implications of revoking this secret by investigating where it is used in your code.
  2. Replace and store your secrets safely. Learn here the best practices.
  3. Revoke and rotate these secrets.
  4. If possible, rewrite git history. Rewriting git history is not a trivial act. You might completely break other contributing developers' workflow and you risk accidentally deleting legitimate data.

To avoid such incidents in the future consider


🦉 GitGuardian detects secrets in your source code to help developers and security teams secure the modern development process. You are seeing this because you or someone else with access to this repository has authorized GitGuardian to scan your pull request.

Comment thread packages/markdown/src/VideoEmbed.tsx Outdated
Comment thread packages/markdown/src/VideoEmbed.tsx Outdated
Comment thread packages/markdown/src/VideoEmbed.tsx Outdated
host === 'youtube.com' ||
host.endsWith('.youtube.com') ||
host === 'youtu.be' ||
host.endsWith('.youtu.be')

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 security Short Host Bypass

host.endsWith('youtu.be') still accepts lookalike registrable domains such as attackyoutu.be. A labeled link like [video](https://attackyoutu.be/dQw4w9WgXcQ) passes this branch, extracts the path as a video id, and renders an embed even though the source link was not from youtu.be or one of its subdomains. Require the same exact-host or dot-boundary check used for the other allowed hosts.

Fix in Codex Fix in Claude Code

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

1 participant