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


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.

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.


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 Tiny 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.


Tiny Enhanced Media Embed endpoint

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


Tiny Enhanced Media Embed format

HTTP response status codes
JSON response objects

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 editor) can look for alternative representations in links.


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)).


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


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


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


Represents all of the possible representations of this resource.


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


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:


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.


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="">
    <img class="ephox-summary-card-thumbnail" src=",0,630,1200_AL_.jpg">
  <a class="ephox-summary-card-link" href="">
    <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 
    <span class="ephox-summary-card-website">IMDb</span>

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;