Demos: 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.

This version of o-video hasn't been branded yet. Please check the latest version, 7.0.0, as branding is a relatively new addition to our components.

Open demo in a new tab

<div class="demo-video-container demo-video-container--large">
	<div class="o-video o-video--large" data-o-component="o-video" data-o-video-systemcode="origami-build-tools" data-o-video-id="21d77b6c-1901-4d1d-9c3b-84dfe9904fd2" data-o-video-advertising="true">
	</div>
</div>
<label>
	Select video:
	<select class"demo-playlist">
		<option value="773a4c8b-8b3f-4508-8ac5-1eae49a13476">Fox News scandal threatens Sky deal</option>
		<option value="a20cfa9a-6d89-4eb0-97ea-18442259401b">S Korea&#x2019;s new president set to rebalance region</option>
		<option value="21d77b6c-1901-4d1d-9c3b-84dfe9904fd2">FT&apos;s Editor on Macron and the UK elections</option>
	</select>
</label>

Captions

With closed captions

Demo
HTML

Open demo in a new tab

<div class="demo-video-container demo-video-container--large">
  <div
    class="o-video o-video--large"
    data-o-component="o-video"
    data-o-video-systemcode="origami-build-tools"
    data-o-video-id="f834a6d2-c84c-4c17-90fd-2b8593b1f8ba"
    data-o-video-advertising="true"
  ></div>
</div>

Placeholder

Demo
HTML

Open demo in a new tab

<div class="demo-video-container demo-video-container--large">
	<div class="o-video o-video--large" data-o-component="o-video" data-o-video-id="21d77b6c-1901-4d1d-9c3b-84dfe9904fd2" data-o-video-advertising="true" data-o-video-systemcode="origami-build-tools" data-o-video-placeholder="true" data-o-video-placeholder-info="[&apos;title&apos;,&apos;description&apos;,&apos;brand&apos;]"></div>
</div>
<label>
	Select video:
	<select class"demo-playlist">
		<option value="773a4c8b-8b3f-4508-8ac5-1eae49a13476">Fox News scandal threatens Sky deal</option>
		<option value="a20cfa9a-6d89-4eb0-97ea-18442259401b">S Korea&#x2019;s new president set to rebalance region</option>
		<option value="21d77b6c-1901-4d1d-9c3b-84dfe9904fd2">FT&apos;s Editor on Macron and the UK elections</option>
	</select>
</label>

Placeholder With Hint

Placeholder with custom icon hint

Demo
HTML

Open demo in a new tab

<div class="demo-video-container demo-video-container--large">
  <div
    class="o-video o-video--large"
    data-o-component="o-video"
    data-o-video-id="21d77b6c-1901-4d1d-9c3b-84dfe9904fd2"
    data-o-video-systemcode="origami-build-tools"
    data-o-video-advertising="true"
    data-o-video-placeholder="true"
    data-o-video-placeholder-hint="Related video"
    data-o-video-placeholder-info="['title','description','brand']"
  ></div>
</div>

Playlist

Wrap a player with a playlist

Demo
HTML

Open demo in a new tab

<div class="demo-video-container demo-video-container--large">
  <div
    class="o-video o-video--large"
    data-o-component="o-video"
    data-o-video-systemcode="origami-build-tools"
  ></div>
</div>

<button name="prev" class="demo-button">Previous</button>
<button name="next" class="demo-button">Next</button>

<br />

<select size="3" disabled class="demo-playlist">
  <option value="773a4c8b-8b3f-4508-8ac5-1eae49a13476">
    Fox News scandal threatens Sky deal
  </option>
  <option value="a20cfa9a-6d89-4eb0-97ea-18442259401b">
    S Korea&#x2019;s new president set to rebalance region
  </option>
  <option value="21d77b6c-1901-4d1d-9c3b-84dfe9904fd2">
    FT&apos;s Editor on Macron and the UK elections
  </option>
</select>

Size Variations

Display the video at preset sizes

Demo
HTML

Open demo in a new tab

<div class="demo-video-container demo-video-container--large">
  <div
    class="o-video o-video--large"
    data-o-component="o-video"
    data-o-video-systemcode="origami-build-tools"
    data-o-video-id="21d77b6c-1901-4d1d-9c3b-84dfe9904fd2"
    data-o-video-placeholder="true"
    data-o-video-placeholder-info="['title','description','brand']"
  ></div>
</div>

<div class="demo-video-container demo-video-container--medium">
  <div
    class="o-video o-video--medium"
    data-o-component="o-video"
    data-o-video-systemcode="origami-build-tools"
    data-o-video-id="21d77b6c-1901-4d1d-9c3b-84dfe9904fd2"
    data-o-video-placeholder="true"
    data-o-video-placeholder-info="['title','description','brand']"
  ></div>
</div>

<div class="demo-video-container demo-video-container--small">
  <div
    class="o-video o-video--small"
    data-o-component="o-video"
    data-o-video-systemcode="origami-build-tools"
    data-o-video-id="21d77b6c-1901-4d1d-9c3b-84dfe9904fd2"
    data-o-video-placeholder="true"
    data-o-video-placeholder-info="['title','description','brand']"
  ></div>
</div>

Status

Switch component view Version

GitHub Repository

Install o-video

If using the Build Service, add o-video@^6.1.3 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@^6.1.3".

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