1. Layout
  2. Controls

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 data attributes can be useful when building a controls container:

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

/* Show controls if autoplay fails. */
media-player[data-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!

          
        

Tailwind

The styling example above built with Tailwind:

          
        

Examples

See the media outlet docs for additional examples: