Embedding in Web Pages

Integrating an eko project can be achieved by simply inserting an embed code in your site. The following sections provide details on the different alternatives.

JavaScript SDK

The easiest and recommended way to embed eko is by using our JavaScript SDK. It’s lightweight and easy to use. The SDK takes care of many potential pitfalls.

Install the SDK via npm or yarn. For example:

npm install --save eko-js-sdk

Load the project to any container on your page. For example:

let ekoPlayer = new EkoPlayer('#myContainer');
ekoPlayer.load('AWLLK1');

Check out the full documentation and the source code: https://github.com/EkoLabs/eko-js-sdk.

WordPress Plugin

If you want to embed eko in a WordPress site install eko’s WordPress Plugin. Using the plugin has few advantages:

1. Eko projects are handled as WordPress post types, making them native to the WordPress ecosystem.
2. Shortcodes allow easy and standard embedding via the WordPress admin.
3. Eko’s JavaScript SDK and advanced php APIs are available for themes and plugins developers.

Check out the full documentation and the source code: https://github.com/EkoLabs/eko-wp-plugin.

Simple iframe

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

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" 
    title="That Moment When"
    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" 
        title="That Moment When"
        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" 
        title="That Moment When"
        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.

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.