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

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



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!



The styling example above built with Tailwind:



See the media outlet docs for additional examples: