Origami Frontend Components & Services

Readme: o-video

Creates a video player and attaches analytics. Also supports pre roll ads.


<div class="o-video" data-o-component="o-video"></div>

Videos can be styled in three different sizes, namely 'small', 'medium' and 'large', which can be added to the element as class modifiers, e.g.

<div class="o-video o-video--large" data-o-component="o-video"></div>


In order to output every size and attribute of o-video, you'll need to include the following:

@import 'o-video/main';

@include oVideo();

You can be more selective about which sizes and attributes you would like to output, by using an $opts map. It accepts the following lists:



@import 'o-video';

@include oVideo($opts:(
    'attributes': ('ads'),
    'sizes': ('small', 'large')

// outputs small and large video styles, and styling support for ads


In order to initialise o-video, you will need the following:

import Video from 'o-video';
const opts = {
    id: 4165329773001,
    optimumwidth: 710,
    placeholder: true,
    classes: ['video'],
    systemcode: 'my-biz-ops-code'
const video = new Video(document.body, opts);


Where opts is an optional object with properties

The config options can also be set as data attribute to instantiate the module declaratively:

<div data-o-component="o-video o-video--large"

With a playlist

Playlists may take a queue of videos and play them one after another.

import Video from 'o-video';

const queue = [

const player = new Video(document.body, { autorender: false, systemcode: 'my-biz-ops-code' });
const playlist = new Video.Playlist({ player, queue });

document.querySelector('.next-btn').onclick = () => playlist.next();
document.querySelector('.prev-btn').onclick = () => playlist.prev();

The queue is an array containing Brightcove video ID strings.


$ npm test

Requires Firefox (v38.0.0 to test with polyfills and mirror CircleCI)


State Major Version Last Minor Release Migration guide
✨ active 6 N/A migrate to v6
⚠ maintained 5 5.1 migrate to v5
╳ deprecated 4 4.1 migrate to v4
╳ deprecated 3 3.1 migrate to v3
╳ deprecated 2 2.5 migrate to v2
╳ deprecated 1 1.4 N/A


If you have any questions or comments about this component, or need help using it, please either raise an issue, visit #origami-support or email Origami Support.


This software is published by the Financial Times under the MIT licence.

active Origami v1
Switch component view

GitHub Repository

Install o-video

If using the Build Service, add o-video@^6.0.7 to your script and link tags.

If running a Manual Build, run npm install "o-video@^6.0.7".

Help & Support

o-video is maintained directly by the Origami team. If you have any questions about o-video or Origami in general, we are happy to help. 😊

Slack: #origami-support
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #origami-support
Email: origami.support@ft.com