@ckeditor/ckeditor5-media-embed

What is @ckeditor/ckeditor5-media-embed?

@ckeditor/ckeditor5-media-embed is a plugin for CKEditor 5 that allows users to embed media such as videos and audio from various sources like YouTube, Vimeo, and more. It provides a user-friendly interface for embedding media content directly into the editor.

What are @ckeditor/ckeditor5-media-embed's main functionalities?

Embedding Media

This feature allows users to embed media content from various sources directly into the CKEditor 5 instance. The code sample demonstrates how to initialize CKEditor 5 with the MediaEmbed plugin and add the media embed button to the toolbar.

ClassicEditor.create(document.querySelector('#editor'), { plugins: [ MediaEmbed, ... ], toolbar: [ 'mediaEmbed', ... ] })

Custom Media Providers

This feature allows users to define custom media providers for embedding media content. The code sample shows how to configure CKEditor 5 to recognize and embed media from a custom provider.

ClassicEditor.create(document.querySelector('#editor'), { plugins: [ MediaEmbed, ... ], mediaEmbed: { providers: [ { name: 'customProvider', url: /customProvider\.com\/media\/([a-zA-Z0-9]+)/, html: match => `<iframe src="https://customProvider.com/media/${match[1]}"></iframe>` } ] } })

Responsive Media Embeds

This feature ensures that embedded media is responsive and adapts to different screen sizes. The code sample demonstrates how to enable responsive media embeds by setting the 'previewsInData' option to true.

ClassicEditor.create(document.querySelector('#editor'), { plugins: [ MediaEmbed, ... ], mediaEmbed: { previewsInData: true } })

Other packages similar to @ckeditor/ckeditor5-media-embed

react-player

react-player is a React component for playing various types of media, including YouTube, Vimeo, SoundCloud, and more. It provides a simple interface for embedding media in React applications. Compared to @ckeditor/ckeditor5-media-embed, react-player is more focused on media playback within React applications rather than being a plugin for a rich text editor.

video.js

video.js is a popular open-source HTML5 video player that supports a wide range of video formats and provides a customizable player interface. While video.js is primarily focused on video playback, it can be integrated into web applications to provide advanced video embedding and playback features. Unlike @ckeditor/ckeditor5-media-embed, video.js is not a text editor plugin but a standalone video player.

plyr

plyr is a simple, customizable HTML5 media player that supports video, audio, and YouTube embeds. It offers a clean and modern interface for media playback. Plyr can be used to embed media content in web applications, but it does not provide the rich text editing capabilities of CKEditor 5. Compared to @ckeditor/ckeditor5-media-embed, plyr is more focused on media playback rather than being an editor plugin.

README

CKEditor 5 media embed feature

This package implements the media embed feature for CKEditor 5. You can use it to insert embeddable media such as YouTube or Vimeo videos and tweets into your rich text content.

Installation

This plugin is part of the ckeditor5 package. Install the whole package to use it.

npm install ckeditor5

Create free account

If you want to check full CKEditor 5 capabilities, sign up for a free non-commitment 14-day trial.

Demo

Check out the demo in the media embed feature guide.

Documentation

See the @ckeditor/ckeditor5-media-embed package page in CKEditor 5 documentation.

License

Licensed under a dual-license model, this software is available under:

• the GNU General Public License Version 2 or later,
• or commercial license terms from CKSource Holding sp. z o.o.

For more information, see: https://ckeditor.com/legal/ckeditor-licensing-options.

Changelog

45.0.0 (April 7, 2025)

The CKEditor 5 v45.0.0 release brings powerful new features and improvements, making content creation smoother and more versatile. From enhanced email editing to a refined linking experience and a brand-new full-screen mode, this update is packed with valuable upgrades.

Release highlights

Email editing enhancements

We are making it easier to create and edit emails directly in CKEditor 5 with several enhancements. This release introduces the following new features:

• Export with Inline Styles (⭐) provides the ability to export email content with automatically inlined styles, ensuring compatibility and proper rendering across different email clients.
• Email Configuration Helper (⭐) is a new configuration helper plugin that provides guidance for integrators to correctly set up an email-friendly editor while avoiding common pitfalls.
• Layout tables: are a new type of tables that has been introduced to simplify the creation of structured email designs, offering better control over layout, alignment and spacing.

Apart from these new features, this update also brings various fixes and improvements related to table behavior, enhanced HTML support, and better handling of complex email structures. These refinements help ensure a more seamless email editing experience, reducing inconsistencies and improving compatibility with external email clients.

The fullscreen feature

A long-requested feature has finally arrived with the introduction of full-screen editing for the classic and decoupled editor types. This new mode provides a focused writing experience by making the editor the centerpiece of the screen. The expanded screen space allows for better visibility of content in sidebars such as comments, suggestions, and document outlines, enhancing your overall workflow.

Improved linking experience

Linking in CKEditor 5 has been significantly upgraded with a redesigned user interface, making adding and editing links more intuitive. Users can now easily link to bookmarks within the document and select links from predefined lists (defined by the developer). These improvements make inserting and managing links faster and more flexible than ever before.

During this initiative, we also aligned visual and technical components of the editor. Each balloon got a header with the tile, we also unified the toolbar behavior and keystrokes of Link and Bookmarks with other widget’s toolbars like image and tables.

[!NOTE] The UI got updated in several places: main view, link properties (decorators), and also its technical implementation changed. Make sure to give special attention to the update if you did any customizations to the link interface.

New installation methods improvements: icons replacement

We are continuing to strengthen the new installation methods while phasing out older solutions. We added one of the key components you asked for: replacing our icons with your custom ones. It is now possible to replace the icons via the package’s override mechanism.

[!NOTE] To achieve a proper solution for icons replacement for the npm builds, we needed to introduce a breaking change. If you used our icons for any purposes, make sure to update their paths.

⚠️ Deprecations in old installation methods: stage 1 completed

We are progressing with deprecation according to our sunset plan. From this release, predefined builds’ packages, such as @ckeditor/ckeditor-build-classic, are now officially deprecated.

We also dropped support for Webpack 4 in both the old and new installation methods. All packages and CDN from this version are now distributed with ES2022 as the target ECMAScript version, providing better compatibility with modern JavaScript features and improved performance.

By the end of 2025, custom builds that rely on webpack and DLL builds will also be deprecated. Refer to our documentation and migration guides to ensure a smooth transition.

We are committed to making CKEditor 5 even better. Stay tuned for more improvements in upcoming releases! If you have any feedback, let us know — we are always listening.

Please refer to the update guide to learn more about these changes.

Happy editing!