Skip to content

Add media embed resizing feature#20100

Open
jacek-cke wants to merge 8 commits intomasterfrom
ck/6593-add-media-embed-resizing-feature
Open

Add media embed resizing feature#20100
jacek-cke wants to merge 8 commits intomasterfrom
ck/6593-add-media-embed-resizing-feature

Conversation

@jacek-cke
Copy link
Copy Markdown
Contributor

🚀 Summary

  • Adds the MediaEmbedResize plugin: drag handles to resize embedded media, mirroring the image resize UX. Bundled with a resizeMediaEmbed command, supporting CSS, and plugin exports.

  • Modernizes provider iframe HTML (YouTube, Vimeo, Dailymotion, Spotify) to useaspect-ratioCSS instead of a <div style="padding-bottom:…"> wrapper. Existing content still upcasts correctly via the URL. This is a prerequisite for resize to work cleanly.

  • Adds an isResizable provider option (exposed via MediaRegistry.isMediaResizable()) so providers can opt out of handles — used by Spotify, whose player doesn't adapt well to free resizing.

  • Splits media-embed.md into a landing page plus dedicated pages for configuration, external preview, styles, and resize. Umberto redirects and @glink references updated.


📌 Related issues


💡 Additional information

The iframe HTML emitted by the built-in providers (YouTube, Vimeo, Dailymotion, Spotify) changed from a <div style="padding-bottom:…"><iframe>…</iframe></div> wrapper — which used the classic padding-bottom hack to enforce an intrinsic aspect ratio — to a bare <iframe width="…" height="…" style="width:100%; height:auto; aspect-ratio:X/Y">. This was needed because the old wrapper fought the resize mechanism (the figure's width couldn't propagate cleanly through a padding-based ratio box), and modern aspect-ratio CSS is baseline-supported (Chrome 88+, Firefox 89+, Safari 15+).

Consequences to be aware of:

  • editor.getData() output for new or re-inserted embeds changes structurally — any downstream HTML post-processing, sanitizer rules, CSS selectors, or content-diffing that targeted the outer <div> wrapper will need updating.
  • Existing stored content is unaffected at load time because upcast reads only the data-oembed-url and regenerates the preview from the current provider config. Once that content is re-saved, however, it persists in the new format.
  • In very old browsers without aspect-ratio support, the iframe falls back to its intrinsic width/height attributes rather than preserving the ratio — acceptable for the platforms we target, but worth noting for anyone on legacy stacks.
  • Custom provider definitions supplied via config.mediaEmbed.providers are not affected — they keep whatever HTML their html() function returns.

🧾 Checklists

Use the following checklists to ensure important areas were not overlooked.
This does not apply to feature-branch merges.
If an item is not relevant to this type of change, simply leave it unchecked.

Author checklist

  • Is the changelog entry intentionally omitted?
  • Is the change backward-compatible?
  • Have you considered the impact on different editor setups and core interactions? (e.g., classic/inline/multi-root/many editors, typing, selection, paste, tables, lists, images, collaboration, pagination)
  • Has the change been manually verified in the relevant setups?
  • Does this change affect any of the above?
  • Is performance impacted?
  • Is accessibility affected?
  • Have tests been added that fail without this change (against regression)?
  • Have the API documentation, guides, feature digest, and related feature sections been updated where needed?
  • Have metadata files (ckeditor5-metadata.json) been updated if needed?
  • Are there any changes the team should be informed about (e.g. architectural, difficult to revert in future versions or having impact on other features)?
  • Were these changes documented (in Logbook)?

Reviewer checklist

  • PR description explains the changes and the chosen approach (especially when performance, API, or UX is affected).
  • The changelog entry is clear, user‑ or integrator-facing, and it describes any breaking changes.
  • All new external dependencies have been approved and mentioned in LICENSE.md (if any).
  • All human-readable, translateable strings in this PR been introduced using t() (if any).
  • I manually verified the change (e.g., in manual tests or documentation).
  • The target branch is correct.

Comment thread packages/ckeditor5-media-embed/src/mediaembedresize/mediaembedresizehandles.ts Outdated
Copy link
Copy Markdown

@cursor cursor Bot left a comment

Choose a reason for hiding this comment

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

Cursor Bugbot has reviewed your changes and found 2 potential issues.

Fix All in Cursor

❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit ed5b325. Configure here.

Comment thread packages/ckeditor5-media-embed/src/mediaregistry.ts
@jacek-cke jacek-cke requested a review from mmotyczynska April 23, 2026 12:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Media embed resizing

1 participant