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:
- Eko projects are handled as WordPress post types, making them native to the WordPress ecosystem.
- Shortcodes allow easy and standard embedding via the WordPress admin.
- 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
andallow
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.