Iframely API for Responsive Web Embeds

Iframely is fast HTTP API for responsive web embeds. Open-source and self-hosted, or available in the cloud. Here’s all ways to get Iframely.

In response to url request, Iframely API returns you the embeds links and semantic meta for a requested web page. It does so by parsing oEmbed, Open Graph and Twitter Cards and general meta on the original page.

Full API JSON

>> Here’s a quick API call for Coub video

Basically, it mimics the <head> of the origin page, with <meta> and list of <links> to embed widgets:

{
    "id": "ACcM3Y",                 -- short ID of a link
    "url": "http://coub.com/view/2pc24rpb",

    "meta": {                       -- meta object with the semantics
        "title": "PARADISE BEACH",  -- e.g. title and others
        "description": "Ilya Trushin",
        "author_url": "http://coub.com/trucoubs",
        "author": "Ilya Trushin",
        "site": "Coub",
        "canonical": "http://coub.com/view/2pc24rpb",
        "keywords": "living photo, ... , media"        
    },

    -- Plus list of embed src links with functional rels . For example,
    "links": {
        "player": [{                -- List of player embed widgets
            "media": {              -- Mostly responsive
                "aspect-ratio": 1.777778
            },
                                    -- SRC of embed. The main attribute.
            "href": "//coub.com/embed/2pc24rpb",
            "rel": ["player", "iframely"],
            "type": "text/html"     -- MIME type. Tells: "use iframe here".
        }, {
            ... 
            -- Can be multiple variations of the same player. 
            -- E.g. one that 'autoplay's, one as MP4 video, one with https src.
        }],
        "thumbnail": [{
            "media": {
                "height": 360,      -- Exact sizes here. 
                "width": 640
            },                      -- We repeat the same rel
            "rel": ["thumbnail"],   -- as iframely.js needs it.
            "type": "image",        -- "use href as src of image"
            "href": "http://cdn1.aka ... med_1381670134_00040.jpg"
        }, {
            ...
        }],
                                    -- app, image (as rel)
        ...                         -- reader, survey
                                    -- logo (sometimes)
        "icon": [{
            ...
        }]
    },

    -- HTML field is only available in Cloud API
    "html": "<div style=\"left: 0px; width: 100%; height: 0px; position: relative; padding-bottom: 56.243%;\">
    <iframe src=\"//iframe.ly/ACcM3Y\" style=\"top: 0px; left: 0px; width: 100%; height: 100%; position: absolute;\"></iframe></div>"
}

html field contains the responsive embed code, which is provided by Cloud API and which also resolves SSL, Flash-on-iOS and autoplay issues. In Open-Source version, you will need to render the code yourself. See how.

Or in oEmbed Format

Iframely comes with oEmbed adapter. It can return embeds as oEmbed JSON, though it is more of a fallback and is slightly less flexible than main endpoint. For example, it skips autoplay videos. If you want to include those in Cloud API, add &iframe=1 parameter to your call.

>> Here’s the same Coub in oEmbed flavor

{
    "id": "ACcM3Y",
    "url": "http://coub.com/view/2pc24rpb",
    "type": "rich",
    "version": "1.0",
    "title": "PARADISE BEACH",
    "author": "Ilya Trushin",
    "author_url": "http://coub.com/trucoubs",
    "provider_name": "Coub",
    "thumbnail_url": "http://cdn1 ... /med_1381670134_00040.jpg",
    "thumbnail_width": 640,
    "thumbnail_height": 360,
    "html": "<div class=\"iframely-widget-container\" style=\"left: 0px; width: 100%; height: 0px; position: relative; padding-bottom: 56.243%;\"><iframe class=\"iframely-widget iframely-iframe\" src=\"//coub.com/embed/2pc24rpb\" frameborder=\"0\" allowfullscreen=\"true\" webkitallowfullscreen=\"true\" mozallowfullscreen=\"true\" style=\"top: 0px; left: 0px; width: 100%; height: 100%; position: absolute;\"></iframe></div>",
    "duration": 12,
    "keywords": "living photo, cinemagraph, ... , media",
    "description": "Ilya Trushin",
    "canonical": "http://coub.com/view/2pc24rpb"
}

photo, video and rich types are supported as oEmbed output. If Iframely doesn't have any embed codes for given URL, oEmbed will return link type object. The additional unified semantic information as well as thumbnails are returned for all URLs. See the list of meta fields below.

Help & Support

If you need any quick help, don’t hesitate to tweet to @iframely or send an email.