What you need to know about our video player.
- When the video is not playing, place information regarding it in the center of the video.
- When the video is playing, place information and controls away from the center.
- Video length should follow guidelines for Date & Time.
- Don’t use a play button in links if pressing it doesn’t actually start the video playback.
The video player
A centered play icon gets a higher conversion rate, and this is the default pattern. The play icon should be highly visible on all background images.
Example centered play button
It’s up to each digital service to decide if the video length is to be shown along with the play icon. Video length should follow the guidelines for Date & Time.
1 tim 20 min, 12 min 8 sek, 1 min 2 sek, 57 sek.
Example centered play button with video length
If a centered play icon doesn’t work well in some context, the lower left corner is also an option.
Example lower-left play button with video length
Information to the user regarding the video, such as error messages, parental controls and live countdowns should be shown in the center of the video image, to increase the chances that the user sees it.
The video player UI have a minimal size of 280 px for it to work properly on touch devices.
How to link to a video
How links to video content are presented depends on the context.
Video auto-play link
When a play icon is visible on a link, clicking that link should start video playback, either in-place or on a separate page. In a service where video is the major part of all content, buttons with play icons are not necessary.
Video link without play icon
For links that don’t lead directly to a video start, but to a page where a video is included, the play icon should not be visible. The video length could still be visible to indicate that the content is playable. In a service where video content is mixed with other content, such as text and images, links to video content should have a play button or a length indication.
It should be clear if an event or a program is currently streaming live. Upcoming live streams should also be marked as such, in a way that clearly distinguishes them from ongoing live streams. It should be clear when the live stream will start.
Video with live iconLive
It’s up to each digital service to decide if the live stream should start automatically when the event or program is deemed to be live.
Guidelines for platforms with design limitations
On platforms with design limitations (such as Apple TV) it is permissible to deviate from the above guidelines as long as efforts are made to adhere to the overall principles.
Live on AppleTV
For example in cases where it’s not possible to use overlays to indicate whether or not a stream is live, an option could be to use textual indicators instead.
For support or feature requests, contact firstname.lastname@example.org