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:

        /* 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!

          
1
2
3
4
5
6
7
8
		    

# Tailwind

The styling example above built with Tailwind:

# Examples

See the media outlet docs for additional examples:

• Layouts
• External Controls