Origami Frontend Components & Services

Demos: o-video

o-video hasn't been branded yet, it only supports the master brand. If you would like to discuss having it branded please get in touch with the Origami team.

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>
Switch component view

GitHub Repository

Install o-video

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

If running a Manual Build, run bower install --save "o-video@^5.1.6".

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: #ft-origami
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: #ft-origami
Email: origami.support@ft.com