Embedding 3rd Party Content in Drupal 8


In Parts 1 and 2 of this series we covered oEmbed in Drupal 7. Little late in the cycle, isn't it? Now onto Drupal 8.

Drupal 8 comes with a lot of improvements to the content editing experience, but it still doesn't have an easy way to embed 3rd party video and other content. As we prepared to start our first major Drupal 8 projects, this was a key gap in the D8 version of our Drupal Starter-kit, Bear. I got excellent help from Jonathan DeLaigle. We looked into the progress on Media Entity and associated modules, and found they have a ways to go. We considered the work involved to help port Asset and/or oEmbed modules. We looked at the URL Embed initiative. To my taste everything seemed a bit... complicated. Then Jonathan pointed out the simplest solution: CKeditor has plugins for this!

The greatest thing about Drupal 8 including CKeditor is that we can develop reusable solutions that integrate with the WYSIWYG for the first time in Drupal. With every site standardized to the same editor on the same version, we can truly collaborate on enhancing the editor experience, rather than trying to pretend that the WYSIWYG is not one of the most important parts of a content management system (and snubbing our noses at the HTML illiterate folks we build websites for). The golden age of WYSIWYG development is upon us! Lucky for us, CKeditor has its own community and its own plugins, and their bounty is now Drupal's as well.

Jonathan made a Drupal 8 CKeditor Media Embed module as a wrapper to the CKeditor plugins Media Embed, Semantic Media Embed, and Auto Embed. This lets you easily use these CKeditor plugins in Drupal 8- and they are wonderful. You have the option of using any provider you like (iframely, embed.ly, etc.) and to save the embedded HTML directly or as a 'semantic' embed code. You can also enable 'Auto Embed' to save yourself the trouble of clicking the Embed CKeditor button and simply turn all viable links into embeds.

Setting this up is almost as easy as using it. First, download and enable the module.

drush dl ckeditor_media_embed
drush en ckeditor_media_embed -y

Then go to /admin/config/content/formats/manage/basic_html (or any text format you want to use it with) and drag the button for either Media Embed or Semantic Media Embed into your WYSIWYG configuration. If you choose Semantic Media Embed, also enable the filter to 'Convert Oembed tags to media embeds' lower down on the same settings page. You can optionally also enable Auto Embed on the same settings page. My preferred setup is to use Semantic Media Embed (it wraps the URLs in tags and processes them as a text filter), and not Auto Embed (less control).

The default provider is iframely, which seems to work well, but you can change that at /admin/config/media/ckeditor-media-embed/settings.

To add an embed, just click the button in the WYSIWYG and paste in a URL.

If you've needed to allow your editors to embed 3rd party content in the past, you're probably ready to cry right now remembering how painful it used to be. It's ok, we'll get over it together. The web is getting better, Drupal is getting better, and it's all going to be fine.

Ready to get started?

Tell us about your project