Media Embed Dimensions
When editors insert a YouTube or Vimeo video with Drupal’s Media Library in CKEditor 5, the player often shows up small, at the provider’s default size. There is no built-in way to set width and height on that embed without custom code or switching to a different video button.
This module adds a Video width and height control to the CKEditor 5 media toolbar. Editors click an embedded remote video, enter pixel dimensions, and save. Those values apply only to that embed. The original media item is not changed, and the player stays responsive on smaller screens.
Features
The module extends Drupal core Media Library embeds (the <drupal-media> tag) so remote videos can be sized per placement.
- Per-embed width and height: Select a remote video in CKEditor 5 and open Video width and height from the media balloon. Enter width and/or height in pixels.
- 16:9 fallback: If only one value is entered, the other is calculated at a 16:9 ratio. Leave both empty to keep the provider default size.
- Non-destructive storage: Dimensions are stored as
data-widthanddata-heighton the<drupal-media>tag. The remote video media entity itself is not modified, so the same video can be reused at different sizes on different pages. - Correct oEmbed rendering: On the frontend, the module updates the oEmbed iframe request (including Drupal’s security hash) so YouTube, Vimeo, and other oEmbed providers actually return a player at the requested size—not just a CSS-scaled box around a small video.
- Responsive output: Sized iframes use
max-width: 100%and an aspect ratio so they scale down on mobile.
Use this module when content editors need control over remote video size inside Body fields, Paragraphs, or any other CKEditor 5 text field that uses Insert Media. Typical cases include a large video in an article, a smaller video beside text, or matching a player to a layout column.
Post-Installation
After enabling the module, there is no new content type and no separate settings page. The CKEditor 5 plugin is attached automatically to text formats that already use the Embed media filter and the Media Library button.
- Enable Media Embed Dimensions (
drush en media_embed_dimensionsor via Extend). - Rebuild caches.
- Edit a text format only if Media Library embeds are not already enabled: Configuration → Content authoring → Text formats and editors. Confirm CKEditor 5, the Insert Media button, and the Embed media filter are on.
- Create or edit content, insert a remote video with Insert Media, click the video, and use Video width and height in the media balloon.
No extra button needs to be dragged onto the main CKEditor toolbar. The control appears on the contextual media toolbar when a remote video is selected.
If the button does not appear immediately after install, rebuild caches again.
Additional Requirements
This module has no third-party libraries or external APIs. It requires Drupal core modules only:
- Drupal core
^10 || ^11 - CKEditor 5
- Editor
- Filter
- Media (including Media Library for inserting remote videos)
Recommended modules/libraries
- CKEditor Media Resize — drag-resize for Media Library images. Use it together with this module if editors also need to size embedded images.
- Video Embed WYSIWYG — a separate “Video Embed” button with its own width/height dialog. That path does not use Media Library
<drupal-media>embeds.
Similar projects
- CKEditor Media Resize and CKEditor Media Resizer resize embedded images (
<img>). They do not size remote video oEmbed iframes. This module is specifically for Media Library remote videos. - Drupal core CKEditor 5 image resize works for directly inserted images, not for
<drupal-media>remote videos. - The Video Embed WYSIWYG button can set width and height, but it is a different embed method, not Media Library.
Supporting this Module
Bug reports and feature requests are welcome in the issue queue.
Community Documentation
See the module README and Help → Media Embed Dimensions after install. Please add walkthroughs or demo links in the issue queue if you publish any.