Resizing media embeds

The media embed resize feature lets you change the width of media embeds (such as YouTube or Vimeo videos) in your content. It is implemented by the MediaEmbedResize plugin.

Demo

Click the media embed in the editor below to select it, then drag any of its corner handles to change the width.

Hummingbirds and the cost of a good meal

Hummingbirds may look delicate, but the males are fiercely territorial. A reliable patch of flowers is a feeding station worth defending, and any rival that drifts too close is met with a high-speed chase through the canopy.

Hummingbirds are the smallest birds in the world. The bee hummingbird of Cuba weighs less than two grams, yet its wings beat 50 to 80 times per second, letting it hover in place, fly backwards, and even briefly upside down. That agility burns fuel fast. A hummingbird's heart can race past 1,200 beats per minute in flight, so the bird must visit hundreds of flowers a day to keep up, and many species drop into a low-metabolism state called torpor overnight to survive until dawn.

Installation

The MediaEmbedResize plugin is not loaded by default. Add it explicitly alongside MediaEmbed to enable the feature:

import { ClassicEditor, MediaEmbed, MediaEmbedResize } from 'ckeditor5';

ClassicEditor
	.create( {
		attachTo: document.querySelector( '#editor' ),
		licenseKey: '&lt;YOUR_LICENSE_KEY&gt;', // Or 'GPL'.
		plugins: [ MediaEmbed, MediaEmbedResize, /* ... */ ],
		toolbar: [ 'mediaEmbed', /* ... */ ]
	} )
	.then( /* ... */ )
	.catch( /* ... */ );

const { ClassicEditor, MediaEmbed, MediaEmbedResize } = CKEDITOR;

ClassicEditor
	.create( {
		attachTo: document.querySelector( '#editor' ),
		licenseKey: '&lt;YOUR_LICENSE_KEY&gt;',
		plugins: [ MediaEmbed, MediaEmbedResize, /* ... */ ],
		toolbar: [ 'mediaEmbed', /* ... */ ]
	} )
	.then( /* ... */ )
	.catch( /* ... */ );

Resizing with handles

When enabled, selecting a media widget shows four corner resize handles. Dragging a handle resizes the embed proportionally while preserving its aspect ratio.

When a media embed is resized, the editor saves a media_resized class and an inline width style on the <figure> element (regardless of the previewsInData setting):

<figure class="media media_resized" style="width:50%;">...</figure>

Common API

The MediaEmbedResize plugin registers:

the 'resizeMediaEmbed' command implemented by ResizeMediaEmbedCommand.

You can resize the selected media embed or remove a previously-applied resize by executing the following code:

// Resize the selected media to 50% width.
editor.execute( 'resizeMediaEmbed', { width: '50%' } );

// Remove the width to return to the default size.
editor.execute( 'resizeMediaEmbed', { width: null } );

Note

We recommend using the official CKEditor 5 inspector for development and debugging. It will give you tons of useful information about the state of the editor such as internal data structures, selection, commands, and many more.

Contribute

The source code of the feature is available on GitHub at https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-media-embed.