Design studio#

This module allows users to customize the player's theme and add a custom logo. Users can modify the colors of the player's controls and progress bar, as well as set the logo's position, visibility, and link.

Features#

Custom logo: Add a logo to the player with options for hiding during playback, setting its position, adding a link, and adjusting margins.
Theme customization: Change the primary, background, and progress bar colors for full control over the player’s appearance.

Limitations#

The module is incompatible with the Podcast module. This will prevent the module from functioning as intended.

Initialization#

window.initPlayer('my-video', {
  designStudioPlugin: {
    logo: {
      src: 'https://www.whitepeaks.co.uk/images/logo.webp',
      hide: true,
      link: 'https://www.whitepeaks.co.uk/en/',
      position: 'top-right',
      margin: 10,
    },
    colors: {
      primary: '#fff',
      highlight: 'red',
      background: '#2FA2FA',
      thumbContainerBg: '#2FA',
      playProgress: 'rgba(22,122,222, 50%)',
      loadProgress: '#000',
      progressHolder: '#999999',
    },
  },
})

Options#

ModuleDesignStudio Options#

Option	Type	Description
logo	`object`	Configuration for the logo displayed on the player.
├ `src`	`string`	URL of the logo image to be displayed on the player.
├ `hide`	`boolean`	If `true`, the logo will be hidden while the video is playing and will appear when paused.
├ `link`	`string`	URL to redirect when the logo is clicked.
├ `position`	`'top-left' \| 'top-center' \| 'top-right' \| 'middle-left' \| 'middle-center' \| 'middle-right' \| 'bottom-left' \| 'bottom-center' \| 'bottom-right'`	Determines the position of the logo on the video player.
└ `margin`	`number`	Margin around the logo in pixels (`px`).
colors	`object`	Configuration for customizing player colors.
├ `primary`	`string`	The primary color for main elements on the player.
├ `highlight`	`string`	Color for buttons and icons on hover.
├ `background`	`string`	Background color of the control bar and buttons.
├ `thumbContainerBg`	`string`	Background color of the thumbnail container (e.g., for video preview).
├ `playProgress`	`string`	Color of the progress bar showing the current playback position and volume level.
├ `loadProgress`	`string`	Background color of the progress bar representing the loaded (buffered) portion of the video.
└ `progressHolder`	`string`	Background color of the container holding the progress bar.