For customizing Wavekit's player we recommend using our embed generator but power users might prefer to generate the embed code themselves.
These are the minimum properties we recommend for the embed iframe:
The background of our player can be configured to be transparent but to allow the
<iframe> to be transparent you need to set
Our player is responsive and will adapt to the dimensions you set to the
<iframe> itself. Depending on the player type, there will be some minimum dimensions. See below for more information.
By default, our player will render a border so we recommend removing the border of the
You can use
loading="lazy" so that the
<iframe> is only loaded once visible after the user starts scrolling. This feature is supported in the latest version of all major browsers.
If you'd like our player to store the referer in the metrics set
referrerpolicy to a valid value.
We recommend using
referrerpolicy="origin" to store the domain that was used to embed a player. For more information check MDN.
Check the metrics section to know more about the metrics we collect.
To customize the player you will need to add query parameters to the embed URL of the
<iframe>. For example to add a
red accent color:
Same with playlists:
You can chain multiple settings using the
These are all the available settings. Except for the player type, the paramaters are the same for both audios and playlists.
You can set the player type with the
The player is responsive and will adapt to the dimensions of the
<iframe> but depending on the player type there are some minimum dimensions.
theme parameter controls the overall color theme of the player.
|The theme will change automatically depending on the OS
|The player will always render with the light theme
|The player will always render with the dark theme
The accent color is controlled via the
accent parameter. Any valid CSS color value can be used like
rgb(255,0,0). When using hex colors like
#ff0000 be sure to escape the
# character like this
You can also define different accent colors for the light or dark themes using
accentDark. This is useful when using the
auto theme because some colors don't work well in both light and dark scenarios.
Enable or disable a visual border around the player. The default value is
Adds rounded corners to the player.
Hide the cover image
Always hide the cover for this player regardless of whether the audio or playlist have an assigned cover.
Make the player completely transparent
Makes the whole background color of the player transparent.
This allows you to create your own container around the
<iframe>. Be sure to also add the
allowtransparency="true" paremeter to the
Opting out of metrics collection
If you do not wish for the player to store metrics for this player, just use
ignoreMetrics=true. For more information about the metric we collect see the metrics section.