Media Player

Used to launch a video and control it through interactive settings.

General guidelines


It has two different states (Default and With controls). The component can be adjusted to different sizes according to your needs. 

By default the video should have an overlay and an icon on top of it. This allows the user to understand that the picture is a video before clicking on it.



When a video is launched, the interactive controls are displayed at the bottom of the video. Controls disappear after 2 seconds of inactivity hovering the component, or in case the mouse is outside the component area.


On mobile devices, the controls are displayed with a tap gesture.

Responsive behaviours
Code & Design assets

Request code and design assets for creating user interfaces.

Component overview

Component overview

Can I contribute to the System?

Of course! Your contribution is more than welcomed and the System team will always be here to review your contributions or discuss.

Back to top