See theinstallation guide to setup the Default Layout.

You can try out the Default Layout on ourplayer demo page.

The Default Layout ships with support for audio, video, and live streams. You can include bothlayouts 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 desiredtype like so:

The same is true for thestream type:

Both the audio and video layout accept color scheme to be either light or dark themed. By defaultit will use the user’spreferred color scheme. You can set a specifictheme by setting thecolorScheme prop on the layout like so:

You can also set the color scheme by setting alight ordark 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 tofalse or'never':

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

You can provide thumbnails which will be used to display preview images when interacting withthe time slider and in the chapters menu. See theloading thumbnails guidefor more information.

Both the audio and video layout support internationalization (i18n) by accepting custom languagetranslations. You can dynamically set thetranslations 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 theComponents section for more.

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

Theslots prop can be used to insert or replace content inside theDefaultAudioLayout. You canfind all availableslot positions below.

Theslots prop can be used to insert or replace content inside theDefaultVideoLayout. You canfind all availableslot 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
• settingsMenuItemsStart
• settingsMenuItemsEnd
• playbackMenuItemsStart
• playbackMenuItemsEnd
• playbackMenuLoop
• accessibilityMenuItemsStart
• accessibilityMenuItemsEnd
• audioMenuItemsStart
• audioMenuItemsEnd
• captionsMenuItemsStart
• captionsMenuItemsEnd

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] {}