<wavekit-playlist>
How cover images are displayed#
By default the <wavekit-playlist> player will show the cover image you uploaded to the playlist. If the playlist has no cover image, the player will show the images from the audio files.
If you'd rather use the cover image from the audio files instead, you can use the prefer-audio-covers setting. When this setting is enabled, the playlist cover image will only be shown when the audio file itself doesn't have an image.
To hide any cover image displayed on the top player of this component, simply use the hide-cover setting.
HTML attributes#
Main settings#
| HTML attribute | Default | Value |
|---|---|---|
| playlist-id Required | -- | A valid playlist id |
| theme | light |
lightdarkauto |
Dimensions#
More information on customizing dimensions.
| HTML attribute | Type | Default |
|---|---|---|
| height | CSS length | Depends on the player type |
| width | CSS length | 100% |
Colors#
All colors have a -dark variant. More information on customizing colors.
| HTML attribute | Type | Default |
|---|---|---|
| accent-color | CSS color | Defined by the theme |
| background-color | CSS color | Defined by the theme |
| border-color | CSS color | Defined by the theme |
| play-arrow-color | CSS color | Calculated automatically |
| text-color | CSS color | Defined by the theme |
| wave-color | CSS color | Same color as the accent color |
| wave-opacity | CSS opacity | Calculated automatically |
Other settings#
| HTML attribute | Default | Value |
|---|---|---|
| always-show-volume | false |
true or false |
| border | true |
true or false |
| hide-cover | false |
true or false |
| ignore-metrics | false |
true or false |
| referer | -- | A valid URL that will appear in your metrics. |
| rounded | false |
true or false |
| show-all-tracks | false |
true or false |
| transparent | false |
true or false |
| prefer-audio-covers | false |
true or false |
CSS variables#
All colors have a -dark variant. More information on customizing colors and dimensions using CSS variables.
| CSS variable | Type | Default |
|---|---|---|
| --wk-accent-color | CSS color | Defined by the theme |
| --wk-background-color | CSS color | Defined by the theme |
| --wk-border-color | CSS color | Defined by the theme |
| --wk-height | CSS length | Depends on the player type |
| --wk-play-arrow-color | CSS color | Calculated automatically |
| --wk-text-color | CSS color | Defined by the theme |
| --wk-wave-color | CSS color | Same color as the accent color |
| --wk-wave-opacity | CSS opacity | Calculated automatically |
| --wk-width | CSS length | 100% |