Blog

Videos and More with New CKEditor Embedded Content Plugin

May 7, 2015 by Michael Evangelista

Further enhancing the content management experience in Mura 6.2, the rich text editor in Mura CMS is now equipped with the versatile oEmbed plugin for CKeditor. Allowing for automatic insertion and format-specific display of videos, images or other third party media, oEmbed provides a fast, reliable option for embedding content from a long list of supported sites into any Mura CMS page.

The oEmbed plugin for CKEditor instantly wraps and displays contents based simply on the URL.

The new "Embed Media" button in the CKeditor toolbar invokes a simple dialog. Simply insert the URL for your content and select the alignment of the image or video wrapper, while oEmbed does the rest!

Video display options include dimensions and the option for a responsively resizing wrapper.

As an example of the plugin's efficiency, there is no need to obtain or copy the specialized YouTube embed code provided for sharing the video in question. Simply copy the URL of the YouTube page containing the video you wish to view, and oEmbed will display the video from that page in a simple user-friendly wrapper.

YouTube, Vimeo, SoundCloud, Flickr, Instragram, Pinterest and More 

Based on the jquery-oembed project, the oEmbed plugin for CKeditor supports a long list of third-party content services, automatically applying the correct appearance, markup and API connection methods to gracefully serve the embedded content across multiple browsers and platforms.

Pinterest pins are parsed perfectly from any provided page!

In order of preference, the plugin attempts to use the following embedding techniques as noted: 

oEmbed - JSONP available - e.g. flickr, meetup etc
embedding (IFRAME/Object) based on URL information - e.g. youtube
oEmbed - JSONP not Available - use YQL to correct - e.g. Ustream, viddler
OGP over YQL - used as a fall back
YQL Screenscape to get embedding details
YQL Screenscrape - e.g. pastie
JSONP Api lookups Source with HTML and CSS - e.g. github, Myspace, Facebook

Regardless of the source, content from any of the many supported services instantly becomes a part of your Mura page through the power and versatility of the oEmbed project, replacing the usual steps for inserting embedded videos, audio tracks and images with a simple one-click process.

Embedded content is displayed directly inline, just like images placed directly in the page text.

Whether embedding videos from YouTube in a promotional page, or featuring Pinterest pins within the the text of a blog post, oEmbed provides an convenient option for showing off your embedded content with ease.

See the oEmbed Plugin documentation for a full list of supported sites and services.

More About this Feature

CKEditor™ oEmbed Plugin: Overview and Documentation
http://w8tcha.github.io/CKEditor-oEmbed-Plugin

Further documentation for Mura CMS developers and content managers is available at docs.getmura.com. Learn more about Mura's powerful features and flexible options at www.getmura.com.  

Examples used in this article are based on the Down to Business theme bundle for Mura CMS, available at themeforest.net.

Comments

Post a Comment

Required Field