Layout

Controls

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

# Usage

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:

        /* 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;
}

      

# Styling

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!

          
1
2
3
4
5
6
7
8