1. Layout
  2. Controls



This page showcases how to create a container for a collection of media controls.


We don't provide a controls component out of the box because you can easily create one with some HTML, CSS, and media attributes.

The following media attributes can be useful when building a controls container:

autoplay-errorShow controls when autoplay fails so the user can start playback manually.
can-loadShow controls skeleton while media is loading.
can-playHide controls while media is not ready for playback.
user-idleHide controls while media is idle (i.e., user is not active).
startedHide controls after media has started (e.g., hide initial big play button).
can-fullscreenShow alternative controls for when media is in fullscreen.
        /* Avoid double controls on iOS. */
vds-media[ios-controls] .media-controls,
/* Hide controls while media is loading, or user is idle. */
vds-media:not([can-play]) .media-controls,
vds-media[user-idle] .media-controls {
  opacity: 0;
  visibility: hidden;

/* Show controls if autoplay fails. */
vds-media[autoplay-error] .media-controls {
  opacity: 1;



In the following example, we create a conventional three-tier (top/middle/bottom) set of controls. You could place social icons at the top, play button in the middle, and scrubber at the bottom. It's completely up to you!