Embedding in Web Pages

Integrating an Eko project can be achieved by simply inserting an embed code in your site.

This document covers the different embedding alternatives. For a deeper integration functionality which would allow you to control the project that’s playing inside the iframe, please see our Integration API.

Embed URL

Each Eko project has an embed URL, which can be used to embed the project in a web page. Just add /embed to the end of the project’s URL.
In the examples below we will be using the first episode of That Moment When, available at:

https://eko.com/tmw/101/embed

Simple iframe

The embed URL can be used as the source of an iframe element to embed the content in a web page:

<iframe 
    src="https://eko.com/tmw/101/embed" 
    allowfullscreen 
    allow="autoplay; fullscreen">
</iframe>

The attributes allowfullscreen and allow are needed to provide your visitors with the optimal experience.

Responsive iframe

Modern websites are responsive, and an iframe is expected to be responsive as well in order to work best across different devices and screen sizes.
While eko’s player adjusts to any aspect ratio, it is common to keep the aspect ratio of the iframe fixed to prevent boxing. The following snippet locks the aspect ratio to 16:9 for horizontal embeds and 9:16 for vertical embeds by adding a wrapping div element and some styling:

<!--Horizontal embed-->
<div style="position: relative; padding-bottom: 56.25%; height: 0; max-width: 100%;">
    <iframe 
        src="https://eko.com/tmw/101/embed" 
        style="width: 100%; height: 100%; border: 0; position: absolute; left:0; right:0;" 
        allowfullscreen 
        allow="autoplay; fullscreen">
    </iframe>
</div>

<!--Vertical embed-->
<div style="position: relative; padding-bottom: 178%; height: 0; max-width: 100%;">
    <iframe 
        src="https://eko.com/tmw/101/embed" 
        style="width: 100%; height: 100%; border: 0; position: absolute; left:0; right:0;" 
        allowfullscreen 
        allow="autoplay; fullscreen">
    </iframe>
</div>

To learn more about locking aspect ratio using CSS read Aspect Ratio Boxes on CSS-Tricks.

Query String Parameters

Adding the query string params provided to the page to the Eko project’s URL is highly recommended. This allows tracking campaigns (e.g. UTM params) and some built-in functionality such as debugging the project in the context of your page.

This can be done on the server side, where the iframe markup is being generated.

The following snippet provides a client side solution using a script that adds the query string parameters to the iframe’s src attribute.

<div style="position: relative; padding-bottom: 56.25%; height: 0; max-width: 100%;">
    <iframe 
        id="ekoframe" 
        style="position: absolute; width: 100%; height: 100%; border: 0;" 
        allowfullscreen 
        allow="autoplay; fullscreen">
    </iframe>
</div>

<script type="text/javascript">
(function() {
    const EMBED_URL = 'https://eko.com/tmw/101/embed';

    const search = window.location.search;
    const queryStr = EMBED_URL.indexOf('?') === -1 ?
        search :
        (search.length && `&${search.slice(1)}`) || '';

    document.querySelector('#ekoframe').src =
        EMBED_URL + queryStr;
}());
</script>

VAST/VPAID

Any project can be displayed in an ad network’s container or any other VAST/VPAID compliant container as a Rich Media Ad Unit or as in-stream video using the industry standard VAST/VPAID tag.
Projects are automatically implemented with all of the necessary tags and compliance to support ad distribution. Eko provides endpoints for both VAST and VPAID. Simply add /vast.xml or /vpaid.js to the end of the project’s URL. For example:

https://eko.com/tmw/101/vast.xml?mediaPartner=adNetworkTitle
https://eko.com/tmw/101/vpaid.js?mediaPartner=adNetworkTitle

It is highly recommended to add a mediaPartner param to analyze the performance of the campaign.

oEmbed

Some CMS systems have built-in support for oEmbed. Eko provides oEmbed endpoints for both JSON and XML at /oembed.json and /oembed.xml.
Each project includes oEmbed discovery elements to make the integration with CMS systems easier. For example, https://eko.com/tmw/101 will include the following elements:

<link rel="alternate" type="application/json+oembed" href="https://eko.com/oembed.json?url=https%3A%2F%2Feko.com%2Ftmw%2F101" title="#TMW You Vaguely Remember Someone Who Totally Knows You" />
<link rel="alternate" type="text/xml+oembed" href="https://eko.com/oembed.xml?url=https%3A%2F%2Feko.com%2Ftmw%2F101" title="#TMW You Vaguely Remember Someone Who Totally Knows You" />

For Wordpress sites, Eko should be added as an oEmbed provider. See wp_oembed_add_provider for details.
Once added as an oEmbed provider, Eko projects can be added easily to any wordpress entity such as post, page or even custom fields. See Wordpress Embeds for more information.