A basic video component that can be used in various ways and on many different types of pages.
Table of ContentsEdit this section, Opens in new window
Video can be used on product or marketing pages.
Video messages and tutorials play an integral role in how customers learn about our products. They give users an engaging way to discover features and learn how to accomplish unfamiliar workflows.
|HTML5 video||For video files that is hosted locally or through a CMS|
|Embedded YouTube video||For YouTube videoes|
Use videos wherever some light guidance can help a user complete a task, especially when learning a new feature or trying out something for the first time. Be sure to present the video in a way that doesn’t compete with primary page content. We never want our video content to get in the way of the user’s getting stuff done. Use good judgment on when and where to include videos.
You can put videos in the Split component aswell.
You can also have captions/subtitles with your video.
You can use youtube videos and self hosted videos.
The player has got an overlay before the video is activated, when it's activated and hovered, and when it is active and paused.
- Some controls are optional and some are now, both are covered below
- Controls are an integral part of usability, make sure all controls work as they should
If the video contains sound, there should be a way for users to control the volume and to mute/unmuteSubtitles
If the video contains spoken word, a narrator or any sort of dialog, the user should be able to choose from a set of subtitlesSeeker
If the video is long, and ment to be informative instead of a visual element, the user should be able to see the duration of the video and be able to traverse the videoClosed caption
For accessibility purposes, if the video is not just a visual element, closed captions should be present. These are not just subtitles, but should also describe what's going on in the video. The transcripts are generated from closed captions, so it's important to include the dialogue here as wellQuality
Generally, the quality of the video displayed should fit the bandwidth the user has. The user should also have the possibility to change the quality of the video if it's not just a visual element.Transcript
The transcript is generated from the closed captions tracks, and should reflect the chosen language of either the html tag or the user.
The transcript component is a simple expandable panel.
The volume control allows the user to control the volume. The control can mute, increase or decrease the volume
If the button is clicked, the video is muted/unmuted. When hovering over the control, the volume can be either increased or decreased.
The control has a clear icon for both states, and a title describing the control.
The transcript component should be automatically generated by the enclosed caption tracks in the video element.