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-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’s new president set to rebalance region</option>
<option value="21d77b6c-1901-4d1d-9c3b-84dfe9904fd2">FT's Editor on Macron and the UK elections</option>
</select>
</label>
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-systemcode="origami-build-tools" data-o-video-id="f834a6d2-c84c-4c17-90fd-2b8593b1f8ba" data-o-video-advertising="true">
</div>
</div>
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-systemcode="origami-build-tools" data-o-video-placeholder="true" data-o-video-placeholder-info="['title','description','brand']"></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’s new president set to rebalance region</option>
<option value="21d77b6c-1901-4d1d-9c3b-84dfe9904fd2">FT's Editor on Macron and the UK elections</option>
</select>
</label>
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-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>
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" 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’s new president set to rebalance region</option>
<option value="21d77b6c-1901-4d1d-9c3b-84dfe9904fd2">FT's Editor on Macron and the UK elections</option>
</select>
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-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>