Live Preview
Embed Code
Copy & paste into your website. Colours are included automatically.
The CSS below defines the player's base styling.
Modify these variables to change colours, typography, border radius, padding, and maximum width.
You can safely adjust these values to integrate the player seamlessly into your own theme.
:root {
--scs-bg: #0f1216;
--scs-card: #141a21;
--scs-text: #e9eef5;
--scs-muted: #a9b4c2;
--scs-accent: #118ca7;
}
.scs-player{
--scs-radius: 4px;
--scs-border: rgba(255,255,255,0.08);
--scs-font: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.scs-player{
font-family: var(--scs-font);
color: var(--scs-text);
background: var(--scs-card);
border: 1px solid var(--scs-border);
border-radius: var(--scs-radius);
padding: 12px 12px 10px;
max-width: 1240px;
}
