fix(embeds): second-pass review — Reddit auto-height, sandbox, Vimeo/Shorts gaps

From the second review pass (agents inspected providers' live embed scripts):
- FIX Reddit auto-height (was broken): embed.reddit.com posts
  { type:'resize.embed', data:<height> } — height is under 'data', not 'height',
  so it never resized and clipped taller posts (scrolling=no). Add that shape.
- Align TweetEmbed sandbox with EMBED_SANDBOX (adds allow-popups-to-escape-sandbox)
  so links/login popups opened from inside a tweet aren't crippled.
- Vimeo: resolve channel/group/album video forms (vimeo.com/channels/{n}/{id} etc.),
  not just paths starting with the id.
- Mobile Shorts: m.youtube.com/shorts/{id} now renders portrait 9:16, not landscape.
- Move extractEmbedHeight into videoEmbed.ts and unit-test all three resize shapes
  (Instagram MEASURE / Reddit resize.embed / Twitter twttr.private.resize).

Agents confirmed everything else current & robust (Dailymotion geo host, Tidal
gridify, sandbox tokens are a safe superset, X still on platform.twitter.com,
550px cap). Tests 21 in this suite.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-07-07 00:08:51 -04:00
co-authored by Claude Opus 4.8
parent 4de2d233ef
commit 3694a3612d
3 changed files with 68 additions and 36 deletions
+22 -1
View File
@@ -6,6 +6,7 @@ import {
isYouTubeShorts,
getVimeoVideoId,
getVimeoParts,
extractEmbedHeight,
getTikTokVideoId,
isTikTokLink,
tiktokIdFromOembed,
@@ -39,7 +40,7 @@ test('YouTube: watch / youtu.be / embed / shorts', () => {
assert.equal(getYoutubeShortsId('https://youtube.com/shorts/abc123'), 'abc123');
});
test('Vimeo (incl. unlisted hash)', () => {
test('Vimeo (incl. unlisted hash + channel/group/album forms)', () => {
assert.equal(getVimeoVideoId('https://vimeo.com/123456789'), '123456789');
assert.equal(getVimeoVideoId('https://vimeo.com/channels/staffpicks'), null);
assert.deepEqual(getVimeoParts('https://vimeo.com/123456789/abc123'), {
@@ -47,6 +48,26 @@ test('Vimeo (incl. unlisted hash)', () => {
hash: 'abc123',
});
assert.ok(parseMediaEmbed('https://vimeo.com/123456789/abc123', 'h')?.embedUrl.includes('h=abc123'));
// channel / group / album share a trailing numeric video id
assert.equal(getVimeoParts('https://vimeo.com/channels/staffpicks/76979871')?.id, '76979871');
assert.equal(getVimeoParts('https://vimeo.com/groups/motion/videos/12345')?.id, '12345');
assert.equal(getVimeoParts('https://vimeo.com/album/99/video/54321')?.id, '54321');
});
test('extractEmbedHeight: Instagram / Reddit / Twitter shapes', () => {
assert.equal(extractEmbedHeight({ type: 'MEASURE', details: { height: 640 } }), 640);
assert.equal(extractEmbedHeight({ type: 'resize.embed', data: 812 }), 812); // Reddit
assert.equal(
extractEmbedHeight({ 'twttr.embed': [{ method: 'twttr.private.resize', params: [{ height: 500 }] }] }),
500,
);
assert.equal(extractEmbedHeight({ height: 300 }), 300); // generic fallback
assert.equal(extractEmbedHeight({ type: 'other' }), undefined);
assert.equal(extractEmbedHeight('not-an-object'), undefined);
});
test('mobile Shorts (m.youtube.com) → portrait', () => {
assert.equal(parseMediaEmbed('https://m.youtube.com/shorts/abc123', 'h')?.kind, 'portrait');
});
test('TikTok: canonical /video/<id> only', () => {