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.
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:
The embed URL can be used as the source of an iframe element to embed the content in a web page:
<iframe src="https://helloeko.com/tmw/101/embed" allowfullscreen allow="autoplay; fullscreen"> </iframe>
alloware needed to provide your visitors with the optimal experience.
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 by adding a wrapping div element and some styling:
<div style="position: relative; padding-bottom: 56.25%; height: 0; max-width: 100%;"> <iframe src="https://helloeko.com/tmw/101/embed" style="width: 100%; height: 100%; border: 0;" allowfullscreen allow="autoplay; fullscreen"> </iframe> </div>
To learn more about locking aspect ratio using CSS read Aspect Ratio Boxes on CSS-Tricks.
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
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
/vpaid.js to the end of the project’s URL. For example:
It is highly recommended to add a
mediaPartnerparam to analyze the performance of the campaign.
Some CMS systems have built-in support for oEmbed. Eko provides oEmbed endpoints for both JSON and XML at
Each project includes oEmbed discovery elements to make the integration with CMS systems easier. For example,
https://helloeko.com/tmw/101 will include the following elements:
<link rel="alternate" type="application/json+oembed" href="https://helloeko.com/oembed.json?url=https%3A%2F%2Fhelloeko.com%2Ftmw%2F101" title="#TMW You Vaguely Remember Someone Who Totally Knows You" /> <link rel="alternate" type="text/xml+oembed" href="https://helloeko.com/oembed.xml?url=https%3A%2F%2Fhelloeko.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.