Integrate Enhanced Media Embed Server

Using the Enhanced Media Embed server with non-public content such as a corporate CMS.

Contribute to this page

Websites like Facebook and Instagram expose an oEmbed endpoint for developers to utilise. The Iframely service creates embeds from websites on the public Internet. For content on private networks, such as a corporate CMS, this document outlines how to enrich the content or build an API that the Enhanced Media Embed server can utilise to create rich hyperlinks. We'll also provide some information about the Enhanced Media Embed server's summary cards.

There are three options for enhancing the embeds created for private content by the Enhanced Media Embed server:

A note on cookies & authentication

If the content or endpoint is on the same domain as the Enhanced Media Embed server, cookies will be forwarded to that server. This should reuse the existing login of the user in a CMS environment.

As an example:

Annotate content with Open Graph or other meta tags

Opengraph

If your content is marked up with Open Graph tags and is accessible with a HTTP GET request from the Enhanced Media Embed server, then business card style embeds will be created based on your content.

Note: If Iframely is enabled in the configuration, then the Open Graph look up will be performed by Iframely. Iframely requires that the content be publicly accessible on the Internet.

At a minimum, you’ll need to define these Open Graph tags:

It’s a good idea to also define:

Additionally, you can specify a video or audio resource to include in the embed by defining:

SEO tags

As an alternative to Open Graph tags, you can include meta tags using the older style recommended by search engines such as Google.

Pros

Cons

Custom API

As an alternative to including meta tags in your content, you can write a custom API that returns JSON in either the oEmbed or Ephox Enhanced Media Embed formats.

See the docs on configuring a custom endpoint for details on getting the Enhanced Media Embed server to utilise your custom API.

OEmbed endpoint

This is a popular choice and many CMSs have existing plugins that support oEmbed. While you can create custom HTML embeds this way, they cannot contain scripts. If the HTML contains a script, then the Enhanced Media Embed server will embed a summary card.

Pros

Cons

Ephox Enhanced Media Embed endpoint

The other option for developing a custom API endpoint is to return JSON in the Ephox Enhanced Media Embed format.

Pros

Cons

Ephox Enhanced Media Embed format

HTTP response status codes

JSON response objects

EphoxEmbedObj

rel, media and html combine to form the default representation of the embeddable resource that your server has chosen. Clients of the Enhanced Media Embed server (such as the TinyMCE editor) can look for alternative representations in links.

RelObj

An array of tags describing the primary type of an embed, where it came from and whether there are any technical attributes that you may want to know about (autoplay, ssl, file format (flash, html5, etc)).

PrimaryRel

A string describing the primary type of an embed containing one of the following values:

TechnicalRel

A string describing technical attributes of an embed containing one of the following values:

SourceRel

A string describing the source of an embed containing one of the following values:

LinksObj

Represents all of the possible representations of this resource.

LinkObj

This represents a representation that you could link to / embed.

MediaObj

The media object describes the bounds of the embed. It can either be responsive or fixed.

Fields when type is fixed:

Fields when type is responsive:

DimensionBoundObj

The dimension bounds define the height or width of a responsive embed.

Fields when type is fixed:

Fields when type is constrained:

No additional fields when type is unbounded.

ErrorObj

Summary cards

When the Enhanced Media Embed server generates a summary card of a URL (using the title, thumbnail, description and website), it returns a HTML snippet like the following. You should apply styles to the document style to suit these to your preference.

<div class="ephox-summary-card">
  <a class="ephox-summary-card-url-thumbnail" href="http://www.imdb.com/title/tt0117500/">
    <img class="ephox-summary-card-thumbnail" src="https://images-na.ssl-images-amazon.com/images/M/MV5BZDJjOTE0N2EtMmRlZS00NzU0LWE0ZWQtM2Q3MWMxNjcwZjBhXkEyXkFqcGdeQXVyNDk3NzU2MTQ@._V1_UY1200_CR90,0,630,1200_AL_.jpg">
  </a>
  <a class="ephox-summary-card-link" href="http://www.imdb.com/title/tt0117500/">
    <span class="ephox-summary-card-title">The Rock (1996)</span><br><br>
    <span class="ephox-summary-card-description">Directed by Michael Bay.  With Sean Connery, Nicolas Cage, Ed Harris, John Spencer. A mild-mannered chemist and an ex-con must lead the counterstrike when a rogue group of military men, led by a renegade general, threaten a nerve gas attack from Alcatraz against San Francisco.</span><br><br>
    <span class="ephox-summary-card-website">IMDb</span>
  </a>
</div>

Recommended CSS

.ephox-summary-card {
    border: 1px solid #AAA;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
    padding: 10px;
    overflow: hidden;
    margin-bottom: 1em;
}

.ephox-summary-card a {
    text-decoration: none;
    color: inherit;
}

.ephox-summary-card a:visited {
    color: inherit;
}

.ephox-summary-card-title {
    font-size: 1.2em;
    display: block;
}

.ephox-summary-card-author {
    color: #999;
    display: block;
    margin-top: 0.5em;
}

.ephox-summary-card-website {
    color: #999;
    display: block;
    margin-top: 0.5em;
}

.ephox-summary-card-thumbnail {
    max-width: 180px;
    max-height: 180px;
    margin-left: 2em;
    float: right;
}

.ephox-summary-card-description {
    margin-top: 0.5em;
    display: block;
}

Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.