SCS Vertical Player

A vertically stacked HTML5 radio player optimised for sidebars and narrow layouts. Perfect for widgets or secondary content areas while retaining full play/stop and volume memory functionality.

How to Use

        <style>
.scs-style-vertical {
  max-width: 220px;
}

.scs-style-vertical .scs-row {
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.scs-style-vertical .scs-info {
  align-items: center;
  text-align: center;
}

.scs-style-vertical .scs-station {
  white-space: normal;
}

.scs-style-vertical .scs-controls {
  flex-direction: column;
  gap: 10px;
}

.scs-style-vertical .scs-volume {
  flex-direction: column;
  gap: 4px;
}

.scs-style-vertical .scs-volume input[type="range"] {
  width: 100%;
}

.scs-style-vertical .scs-visual {
  width: 100%;
  height: 40px;
}
</style>

<div id="scs-player"></div>
<script
  src="https://www.streamcodestudio.com/players/scs-player.js"
  data-style="vertical"
  data-visual="bars"
  data-station="YOUR_STATION_NAME"
  data-stream="https://YOUR_STREAM_URL_HERE">
</script>

Copy & paste into your website. No download required.

Customize Player Colours

Want this player to match your website or station branding?
Use the Player Styling Tool to visually adjust colours and instantly copy the embed code - no CSS knowledge required.
Note: Visualiser bars use the Accent colour.
Press Stop then Play to refresh the bars after changing colours.

Open Player Styling Tool