Layouts

Default Layout

A guide on how to setup the default audio/video layout and available customization options.

The Default Layout ships with support for audio, video, and live streams. You can include both layouts at the same time, only one will be matched depending on the view type.

By default, the view type is inferred from the provider and media type. You can specify the desired type like so:

The same is true for the stream type:

Both the audio and video layout accept color scheme to be either light or dark themed. By default it will use the user’s preferred color scheme. You can set a specific theme by setting the colorScheme prop on the layout like so:

You can also set the color scheme by setting a light or dark class on a parent element:

Both the audio and video layout will adapt to small containers to ensure an optimal user experience. You configure when the small layout is displayed like so:

If you’d like to disable small layouts, set the query to false or 'never':

You can easily replace the icons used in the layouts to match the style of your application like so:

You can provide thumbnails which will be used to display preview images when interacting with the time slider and in the chapters menu. See the loading thumbnails guide for more information.

Both the audio and video layout support internationalization (i18n) by accepting custom language translations. You can dynamically set the translations property to update the language like so:

The following snippets contain a complete list of CSS variables and their respective default values. They can all be adjusted by you to customize the audio/video layout and child components as desired.

The following variables can be used to specifically customize the audio layout. See the Components section for more.

The following variables can be used to specifically customize the video layout. See the Components section for more.

The slots prop can be used to insert or replace content inside the DefaultAudioLayout. You can find all available slot positions below.

The slots prop can be used to insert or replace content inside the DefaultVideoLayout. You can find all available slot positions below.

Content can be slotted inside specific video layout sizes like so:

The following slot positions are available for inserting or replacing content:

• bufferingIndicator
• captionButton
• captions
• title
• chapterTitle
• currentTime
• endTime
• fullscreenButton
• liveButton
• livePlayButton
• muteButton
• pipButton
• airPlayButton
• googleCastButton
• playButton
• loadButton
• seekBackwardButton
• seekForwardButton
• startDuration
• timeSlider
• volumeSlider
• chaptersMenu
• settingsMenu
• settingsMenuStartItems
• settingsMenuEndItems

The following demos show how the Default Layout adapts to audio, video, and live streams:

import { DefaultAudioLayout } from "@vidstack/react/player/layouts/plyr";

<MediaPlayer src="audio.mp3">
  <MediaProvider />
  <DefaultAudioLayout icons={defaultLayoutIcons} />
</MediaPlayer>

/* Example. */
.component[data-foo] {}

import { DefaultVideoLayout } from "@vidstack/react/player/layouts/plyr";

<MediaPlayer src="video.mp4">
  <MediaProvider />
  <DefaultVideoLayout thumbnails="/thumbnails.vtt" icons={defaultLayoutIcons} />
</MediaPlayer>

/* Example. */
.component[data-foo] {}