Introduction

The Duration is a compact label that shows how long a video lasts. It typically appears within the media of a video, over its thumbnail, and gives users the length before they decide to play it.

The Duration is displayed for video content only, and only when a valid duration is available. When there is none, the element is not displayed at all.

Anatomy

The label

The Duration is a single line of text on a solid, semi-transparent background. The text is set in the OS font of the device, at a fixed 13 px, and a padding separates it from the edges of its background: a narrow one above and below, a wider one left and right.

Properties

Format

The value is formatted automatically, depending on how long the video is: minutes and seconds for a short one, hours, minutes and seconds beyond the hour.

Background

The background is black at 50% opacity. It is an overlay: the image underneath keeps showing through it, which is what makes the label readable over any picture while keeping it discreet.

Shape

The Shape atom applies to the background, from Sharp to Round. On a label this short, Round rounds the ends into a pill.

Layout

Placement

The Duration sits in a corner of the media, on the right: at the bottom in most cells, at the top in an immersive one.

In a 16:9 ratio, the vertical space can become too tight for the Duration and the play icon to coexist, and the two would overlap. In that case the play icon takes priority, and the Duration is hidden.