This version of this component hasn't been branded yet.

Please check the latest version, 4.1.10, as branding is a relatively new addition to our components.

o-video

Financial Times video component

active

Native

Native

<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">
	</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

<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="f834a6d2-c84c-4c17-90fd-2b8593b1f8ba" data-o-video-advertising="true">
  </div>
</div>

Placeholder

Placeholder

<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-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

<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-placeholder="true" data-o-video-placeholder-hint="Related video" data-o-video-placeholder-info="[&apos;title&apos;,&apos;description&apos;,&apos;brand&apos;]"></div>
</div>

Playlist

Wrap a player with a playlist

<div class="demo-video-container demo-video-container--large">
	<div class="o-video o-video--large" data-o-component="o-video"></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

<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-placeholder="true" data-o-video-placeholder-info="[&apos;title&apos;,&apos;description&apos;,&apos;brand&apos;]"></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-id="21d77b6c-1901-4d1d-9c3b-84dfe9904fd2" data-o-video-placeholder="true" data-o-video-placeholder-info="[&apos;title&apos;,&apos;description&apos;,&apos;brand&apos;]"></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-id="21d77b6c-1901-4d1d-9c3b-84dfe9904fd2" data-o-video-placeholder="true" data-o-video-placeholder-info="[&apos;title&apos;,&apos;description&apos;,&apos;brand&apos;]"></div>
</div>
Bower Dependencies
o-icons >=4.4.2 <6
o-colors ^4
o-fetch-jsonp ^2.0.0
o-loading ^2
o-typography ^5
o-viewport ^3.0.1
GitHub Repository

Quickstart

Build Service

Add the following to your <script> and <link> tags.

o-video@^4.1.5

How do I do that?

For more information see the Origami build service.

Manual Build Process

Run the following command in the root directory of your project, to add this dependency to your bower.json file:

bower install --save "o-video"@"^4.1.5"

For more information see the Origami build process.