--- category: features --- {@snippet features/build-media-source} # Media embed The {@link module:media-embed/mediaembed~MediaEmbed} feature brings support for embeddable media (such as YouTube videos or tweets) in the editor content. ## Demo You can use the "Insert media" button in the toolbar to embed media like the following examples. You can also paste the media URL directly into the editor content and it will be [automatically embedded](#automatic-media-embed-on-paste). * * * {@snippet features/media-embed} ## Installation To add this feature to your editor, install the [`@ckeditor/ckeditor5-media-embed`](https://www.npmjs.com/package/@ckeditor/ckeditor5-media-embed) package: ```bash npm install --save @ckeditor/ckeditor5-media-embed ``` Then add `'MediaEmbed'` to your plugin list and {@link module:media-embed/mediaembed~MediaEmbedConfig configure} the feature: ```js import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed'; ClassicEditor .create( document.querySelector( '#editor' ), { plugins: [ MediaEmbed, ... ], toolbar: [ 'mediaEmbed', ... ] mediaEmbed: { // configuration... } } ) .then( ... ) .catch( ... ); ``` Depending on how you will configure this feature, you may need to use services like [Iframely](http://iframe.ly/) or [Embedly](https://embed.ly/) to display content of embedded media on your target website. Read more about [displaying embedded media](#displaying-embedded-media-on-your-website). ## Configuration ### Output type The data output format of the feature can be configured using the {@link module:media-embed/mediaembed~MediaEmbedConfig#semanticDataOutput `config.mediaEmbed.semanticDataOutput`} option. #### Non–semantic output By default the media embed feature outputs media in the same way it works in the editor, this is, if this media is "previewable", the media preview (HTML) is saved to the database: ```html
``` Currently, the preview is only available for content providers for which CKEditor 5 can predict an `