Layouts
Plyr Layout
A guide on how to setup the Plyr audio/video layout and available customization options.
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:
Icons
Section titled IconsYou can easily replace the icons used in the layout to match the style of your application like so:
Thumbnails
Section titled ThumbnailsYou 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.
Language
Section titled LanguageThe layout supports internationalization (i18n) by accepting custom language
translations. You can dynamically set the translations
property to update the language like so:
CSS Variables
Section titled CSS VariablesThe 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.
Slots
Section titled SlotsThe slots
prop can be used to insert or replace content inside the PlyrLayout
. You can
find all available slot positions below.
Positions
Section titled PositionsThe 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
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.
Previews
Section titled PreviewsThe following demos show how the Plyr Layout adapts to audio, video, and live streams:
Audio
Section titled AudioVideo
Section titled VideoAPI Reference
Section titled API ReferenceHTMLAttributes
Ref<HTMLElement>