This story describes how to embed content from other websites such as Youtube, Vimeo, Instagram, FB, Twitter, etc. in an article.

PLEASE NOTE: Although the mockups appear in a new visual design please ignore the styling. Only focus on mechanics & functionality!

The oEmbed format for embedding linked content

We've built our mockups on the assumption that we leverage the oEmbed format for embedding URLs to embed linked content inside the editing stream. This de-facto standard seems to be a widely accepted, convenient, scalable option for linking web content.

For a list of libraries implementing oEmbed, please visit the oEmbed homepage. There are also services we could use (e.g. iframely) for handling oEmbed requests, and these even take care of the visual representation of a link. Libraries and services may handle non-oEmbed web links as well. They create boxes for such links that look and work similar to how links look in HipChat. This makes it very convenient for users to embed just about any web content they encounter.

Embed content from another website

1. Click add icon and select the embed icon in the option bar.

2. A text field will show up and ask the user to paste a link of the web content to be embedded. Besides videos, tweets, etc. it can in fact be any URL.

3. Type or paste link to the input field.

4. After pasting the link to the text field hit return key, the field will disappear and the content will show up as a preview. The visual appearance (even of normal web URL links e.g. www.magnolia-cms.com) is something that is generated and not explicitly designed by us (see note on oEmbed above).