Layouts

Plyr Layout

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

See the installation guide to setup the Plyr Layout.

You can try out the Plyr Layout on our player demo page.

The Plyr Layout ships with support for audio, video, and live streams:

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:

You can easily replace the icons used in the layout 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 scrubbing. See the loading thumbnails guide for more information.

The layout supports internationalization (i18n) by accepting custom language translations. You can dynamically set the translations property to update the language like so:

The following snippet contains a complete list of CSS variables and their respective default values. They can all be adjusted by you to customize the layout as desired.

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

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

• airPlayButton
• captionsButton
• currentTime
• download
• duration
• fastForwardButton
• fullscreenButton
• liveButton
• muteButton
• pipButton
• playButton
• playLargeButton
• poster
• restartButton
• rewindButton
• settings
• settingsButton
• timeSlider
• volumeSlider
• settingsMenu

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

<PlyrLayout />