Controlling Player Styles

Overview

The BiddingStack video and audio players are styled per page with three mechanisms, all shown live on the demo pages:

1. Container CSS: the size of the player follows the container element you place on the page.
2. data-config attribute: a JSON object on the container that overrides the player configuration for that page.
3. Runtime JavaScript API: change the audio player's theme and mode on the fly without reloading the page.

Every option set on the page overrides the defaults configured in the BiddingStack console, so you can keep one console configuration per domain and adjust individual pages as needed.

Sizing with container CSS

Give the container element a width (and, for vertical layouts, an aspect ratio). The player fills the container:

<!-- 320px wide 16:9 video player -->
<div id="bsvp-video-player-1" data-videoId="YOUR_VIDEO_ID" style="width: 320px"></div>

<!-- Vertical reels player -->
<div
  id="bsvp-video-player-1"
  data-playlistId="YOUR_PLAYLIST_ID"
  style="width: 264px; aspect-ratio: 264 / 470"
></div>

Overriding config with data-config

Set a JSON object in the data-config attribute of the container. It is merged into the player configuration on load.

Video player

A compact single-video embed without the playlist strip:

<div
  id="bsvp-video-player-1"
  data-videoId="YOUR_VIDEO_ID"
  data-config='{"type": "single", "listStyle": "none", "enableSound": true}'
  style="width: 320px"
></div>

A vertical reels feed with custom colors, header text, and swipe behavior:

<div
  id="bsvp-video-player-1"
  data-playlistId="YOUR_PLAYLIST_ID"
  style="width: 264px; aspect-ratio: 264 / 470"
  data-config='{
    "type": "list",
    "layout": "vertical",
    "autoPlay": false,
    "controls": false,
    "enableSound": true,
    "enableFloat": false,
    "containerStyle": {
      "size": "264x470",
      "mainColor": "#cccccc",
      "hoverColor": "#ffffff"
    },
    "verticalConfig": {
      "size": "264x470",
      "headerText": "Related Shorts",
      "showBranding": true,
      "showProgress": true,
      "swiperSpeed": 300,
      "adInterval": 2
    }
  }'
></div>

Commonly used video style options:

Option	Description
type	single or list
layout	vertical for a reels-style swipe feed
listStyle	none hides the playlist strip
autoPlay, controls, enableSound	Playback behavior
enableFloat, lite	Floating behavior when the player scrolls out of view
containerStyle	size (e.g. 320x180), mainColor, hoverColor
verticalConfig	Vertical layout options: size, headerText, showBranding, showProgress, swiperSpeed, adInterval

Audio player

The audio player look is controlled by themeid (1 to 12) and its placement by the mode options:

<div
  id="bsap-audio-player-1"
  data-audioId="YOUR_AUDIO_ID"
  data-config='{"themeid": 3, "mode": "embed", "lite": false, "enableFloat": false}'
></div>

Themes:

ID	Theme
1	Classic Black & White
2	Dark Mode
3	Midnight Blue
4	Forest Green
5	Warm Sunset
6	Vibrant Purple
7	Minimalist Gray
8	Ocean Blue
9	Elegant Bordeaux
10	Eco Green
11	Compact Pill
12	Google Listen (TTS)

Placement modes, as used on the demo pages:

Placement	Config
Inline + sticky pill	{"mode": "embed", "lite": true, "enableFloat": true, "liteFloatConfig": {"bottom": 20}}
Inline only	{"mode": "embed", "lite": false, "enableFloat": false}
Bottom bar on scroll	{"mode": "embed", "lite": false, "enableFloat": true, "floatConfig": {"bottom": 0}}
Always-on bottom bar	{"mode": "float", "lite": false, "enableFloat": false, "floatConfig": {"bottom": 0}}

floatConfig and liteFloatConfig position the floating player with top and bottom offsets in pixels.

Changing styles at runtime

The audio player exposes a JavaScript API on window.BIDDINGSTACK_AP for switching styles without a page reload. The theme and mode pickers on the audio demo pages use it:

// Read the current configuration of a player
var config = window.BIDDINGSTACK_AP.getPlayerConfig('#bsap-audio-player-1')

// Reload the player with new options
window.BIDDINGSTACK_AP.reload('#bsap-audio-player-1', {
  themeid: 5,
  mode: 'embed',
  lite: true,
  enableFloat: true,
})

The API is available once the player tag has loaded, so wait for window.BIDDINGSTACK_AP to be defined before calling it.

Live demos

Each demo page is a working example you can inspect:

• Video Player: Single-Video Embed: compact embed with listStyle: "none"
• Video Player: Playlist Channel: playlist via data-playlistId
• Video Player: Vertical Reels: layout: "vertical" with verticalConfig
• Audio Player: Article Embed: live theme and mode switching
• Audio Player: Playlist Channel: podcast playlist with subscribe links

For the full list of player settings and the console configuration, see the BiddingStack RichMedia SDK docs.