<wavekit-overlay>
Click this button player to see the overlay player in action:
To enable the overlay player in a page, simply add it right before closing the <body> tag.
When added to a page, all Wavekit players and playlists in that page will open the overplay player once the user plays some audio. The overlay player will keep in sync with the player currently playing audio.
Also check this demo to show how it all works together with multiple players.
HTML attributes#
Main settings#
| HTML attribute | Default | Value |
|---|---|---|
| theme | light |
lightdarkauto |
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 |
| 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 |
|---|---|---|
| hide-cover | false |
true or false |
| z-index | 1000 |
Any positive integer number |
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-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-z-index | Any positive integer number | 1000 |