Origami Frontend Components & Services

Readme: o-video

o-video is not maintained by the Origami team. This means that the Origami team will not necessarily be able to help you with support requests. The people who maintain this component may be able to offer support, but it's not guaranteed.

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


Check out how to include Origami components in your project to get started with o-video.


<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 '@financial-times/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 '@financial-times/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 '@financial-times/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 '@financial-times/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.


See Origami build tools.

$ obt test

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


State Major Version Last Minor Release Migration guide
✨ active 7 N/A migrate to v7
⚠ maintained 6 6.1 migrate to v6
╳ deprecated 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.

Switch component view

GitHub: o-video@7.2.6

Install o-video

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

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-video@^7.2.6".

Help & Support

o-video is not supported directly by the Origami team. We make no guarantees, but will help if we can. First try contacting its maintainers at:

Slack: #content-innovation
Email: content-innovation-team.customer-products@ft.com