Looking for the old docs? Go here

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:

tsx
    
    
    
    

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:

ts
    
    
    
    

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.

css
    
    

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

tsx
    
    

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
INFO

Any slot position can be prefixed with either before or after to insert content before or after that position. For example, afterCaptionButton will insert content after the caption button.

RefAttributes
Ref<HTMLElement>
import { PlyrLayout } from "@vidstack/react/player/layouts/plyr";
<PlyrLayout />
PropTypeDefault
icons
PlyrLayoutIcons
undefined
posterFrame
number
undefined
clickToPlay
boolean
undefined
clickToFullscreen
boolean
undefined
controls
PlyrControl[]
undefined
displayDuration
boolean
undefined
download
FileDownloadInfo
undefined
markers
PlyrMarker[]
undefined
invertTime
boolean
undefined
thumbnails
ThumbnailSrc
undefined
toggleTime
boolean
undefined
translations
Partial<PlyrLayoutTranslations>
undefined
seekTime
number
undefined
speed
object
undefined
slots
PlyrLayoutSlots
undefined
asChild
boolean
false