feat(core): add vimeo media host and html/react components#1667
Merged
Conversation
✅ Deploy Preview for vjs10-site ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
📦 Bundle Size Report🎨 @videojs/html
Presets (7)
Media (10)
Players (5)
Skins (30)
UI Components (37)
Sizes are marginal over the root entry point. ⚛️ @videojs/react
Presets (7)
Media (9)
Skins (27)
UI Components (31)
Sizes are marginal over the root entry point. 🧩 @videojs/core
Entries (13)
🏷️ @videojs/element — no changesEntries (2)
📦 @videojs/store — no changesEntries (3)
🔧 @videojs/utils — no changesEntries (10)
📦 @videojs/spf — no changesEntries (4)
ℹ️ How to interpretAll sizes are standalone totals (minified + brotli).
Run |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
Add referrerPolicy support to Vimeo embeds, extract a shared useAttachIframe hook for React, and trim the public surface of VimeoMedia.
Standardizes the attribute name (was the misspelled data-cross-origin-iframe) so skins can disable backdrop-filter over cross-origin embeds.
luwes
force-pushed
the
feat/vimeo-media-host
branch
from
440145e to
4f66881
Compare
sampotts
reviewed
Jun 14, 2026
luwes
force-pushed
the
feat/vimeo-media-host
branch
from
4f66881 to
bf93da5
Compare
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes using default effort and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit bf93da5. Configure here.
sampotts
approved these changes
Jun 17, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Ported from #1620
Refs #1435
Refs #1538
Summary
Adds Vimeo as a first-class media source on the current media stack. A
VimeoMediahost wraps@vimeo/playerbehind the standardVideosurface, with HTML (vimeo-video) and React (VimeoVideo) components and sandbox demos.This re-ports #1620 onto the current
HTMLMediaElementHost+attach/detacharchitecture (the original PR targeted theMediaLayer/extension design).Changes
VimeoMediacore host: wraps@vimeo/player, maps player events to the standard media API (play/pause, time, volume, fullscreen, PiP, text tracks), and parses ids/URLs including unlistedhhashes and live events. Driven viaattach(iframe)/detach()to match how hosts are wired here.MediaPlayedRangesMixin) rather than a layer/extension, so iframe-based hosts expose aTimeRanges-likeplayed.CustomMediaElementgains minimal iframe-embed support: keep host-bound attrs (e.g.src) in the template, and skip mirroring attributes / track / source syncing onto the iframe.escapeHtmlutil to secure the iframesrcin templates.vimeo-videopreset with HTML/React templates and shell wiring (no Tailwind skin variant, source picker disabled).Architecture notes
VimeoMedia extends MediaPlayedRangesMixin(EventTarget) implements Video. It's a leaf host with no native<video>target — thetargetis the<iframe>the player binds to.upgradePropertyreconnect rewrite ofCustomMediaElement, since that lifecycle is shared by all media hosts; Vimeo follows the same construct-on-create / destroy-on-disconnect lifecycle as the others.loadCompletegate on playererrorsoplay()/ fullscreen / PiP do not hang on load failure.Testing
pnpm -F @videojs/core test src/dom/media/vimeo src/dom/media/media-played-rangescore/utils/html/reactsuites pass;pnpm typecheckandpnpm check:workspaceclean for touched files.Note
Medium Risk
Touches shared
CustomMediaElementbehavior for all iframe-based embeds and adds a new third-party dependency; playback and load-failure handling are security- and UX-sensitive but covered by tests.Overview
Adds Vimeo as a first-class embed source: a
VimeoMediahost wraps@vimeo/playerand exposes the standard media API viaattach(iframe)/detach(), with URL parsing (unlistedh, live events) and iframe embed URL building.MediaPlayedRangesMixinsupplies aTimeRanges-likeplayedfor hosts without nativeHTMLMediaElement.played.CustomMediaElementis extended for iframe embeds: keepsrc(and similar) in the shadow template, skip attribute mirroring and track/source sync, and setdata-cross-origin-frameon connect.Ships
vimeo-video/VimeoVideo(HTML + React),useAttachIframe,escapeHtmlfor safe iframesrc, sandboxvimeo-videopreset (fixed Vimeo URL, no Tailwind, source picker off), and unit tests for Vimeo, played ranges, and iframe custom elements.Reviewed by Cursor Bugbot for commit bf93da5. Bugbot is set up for automated code reviews on this repo. Configure here.