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:

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 by using Player Queries:

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 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.

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

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

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

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

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

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

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

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