Feature of the Month - Media embed in CKEditor 5

At its very dawn, the World Wide Web, one of the few phenomena in the world to have its abbreviation pronounced twice longer than the original name, was a rather humble place. The very first website, still kept up by CERN, was just a bunch of lines of text with links on an even background. The colors depended on the browser used, but nowadays it would probably render black on white, with the links blue.

It does not impress now, but three decades ago putting up a working copy of the hypertext document concept was a big deal. And with the addition of gifs and jpgs, the world wide web stayed very much that for the next few years. This has, however, changed rapidly with the advent of cascading style sheets and the introduction of rich media, especially video. It was not really possible to achieve good results before the speed of the internet connections rose sufficiently to support playing movies and clips in some humanly quality.

# Enriching your content with video materials

With the rise and subsequent popularity of the so-called Web 2.0 — a concept of the internet based on user-generated content — at the break of the century, we saw the advent of sites like YouTube or Vimeo that let the webmasters host their own video materials. The former one, established in 2005, was deemed to be a place for amateurs for the first decade of its existence, while the latter, a year senior, has always been a place to host more professional productions.

For many years these two and other, similar services have offered the most reliable and sensible way to support video materials online. Even today, when the social aspect plays a greater role than mere technical hosting, these are the most popular platforms to support rich content for webmasters. And while often used as stand-alone solutions, they nevertheless provide a valuable source of rich media.

This is where the media embed feature for CKEditor 5 comes into play. This simple and effective plugin allows for including a video hosted on Vimeo or YouTube into the edited content. Just use the toolbar button for media embed and paste a link to the video material you want to embed.

The embedded video is instantly previewable, giving the idea of what it will look like in the final content.

# Social media and special content

Videos are, of course, not the only media content that can be delivered via the internet. Music would be the first guess for most, probably. Today’s music, however, is perceived and presented far differently from what was popular at the dawn of the world wide web. In the ancient era, websites would have songs embedded as .WAV or even MIDI files, with simple players or played in the background. Nowadays listening to music online is much more a social activity than ever before — just like almost anything a regular user would do.

Apart from the clips and lyric videos delivered by YouTube, the most prevailing way to enjoy your favourite rare Vegas-era Elvis experience or the lesser-known rendering of Take me home, country roads from the Fallout 64 OST would probably be the streaming service. Large music libraries that one can access on-demand grew to power in recent years.

Spotify would be one of those for sure. This library, available both as an ad-driven and as a commercial service, provides access to thousands of bands, singers and albums.

The media embed feature may be used to insert an album listing right into the content, enabling the reader to play out the whole list.

One of the features of such services is sharing. Users can exchange links to their favourite bands, albums and even their own compiled playlists. This is very much the spirit of Web 2.0, where creating and sharing was the basic philosophy.

Creating is, even more, a foundation of another social network which is Instagram. This photo-sharing website allows users to upload pictures, photos or drawings, along with a short commentary, and share these with their followers.

As you can observe on the screenshot, not all media are instantly previewable. This is due to the technical limitations of services like Twitter or Instagram. You can read more about the reasons for that in the feature documentation.

Even though these cannot be previewed in the editor itself, they will embed correctly and display in the effecting document, as shown below.

# Ways of embedding media

Due to the complicated nature of previews, while embedding media, there is more than one approach to that in CKEditor 5.

The first and easiest is simply using the media embed feature, which is enabled by default in all pre-configured editor builds. It will produce the output with preview only where available. You can use the toolbar dropdown and enter a media URL, as observed in a screencast above.

The other available way of embedding rich content is using the grace of the auto media embed plugin, which is automatically loaded along with the main media embed plugin. It will recognize a media URL pasted in the editor window and convert it appropriately. Due to technical constraints, it can only recognize stand-alone links being pasted. If the media URL is part of a larger text, it will not get converted.

Should there be a need for editors to be able to preview all of the embedded media, there is also a solution utilizing external services. CKEditor 5 can accept API calls from services like Iframely or Embedly. You can refer to the documentation for instructions on integrating both Iframely and Embedly. You can also check out the instruction provided on Iframely’s website on how to integrate it with both CKEditor 5 and CKEditor 4.

# Enriching your content with media embedding

Whatever your content may be, the media embed feature is versatile and may address various needs. Whether it requires introducing movies, quoting social media or including a map, all the numerous options for embeddable media are there. Paired with the image feature and other rich text content features, it helps produce advanced documents, websites and other types of materials, all of that with the benefits of a WYSIWYG editor. All these tools help deliver the best experience for both writers and editors as well as for the readers and recipients.