Customizing your Player

Available for Viostream plans: Professional Enterprise

Our player has several features that can be toggled on or off, and you can also style it with different chaptering displays and a custom color scheme

The Viostream Player contains several features that can be toggled on, as well as the ability to apply custom branding and styles. To create a custom Player:

  1. From the Players Library, click the New player button
  2. In the dropdown, enter a name for your Player and click Create
  3. Underneath the Player Preview, click the Customize this Player button
  4. Select your options and click Update

If you would like to use this Player as your account default, simply toggle the Set this as the default player switch and click the Update button.

Player Features

Screenshot of the Customize Your Player screen

The following features can be optionally toggled on:

Feature Description
Show Title Toggle this to show or hide the title when you embed a video
Show Playback Speed Selector Allow your viewers to select a playback speed when watching your videos
Show Quality Selector Allow viewers to select from different qualities of video resolution
Allow Transcript Downloads Allow viewers to download a videos transcript file
Allow Social Sharing Allow viewers to share a link to the video on Facebook, Twitter on LinkedIn

Chapter Display Styles

Three different Chapter display styles are available:

Progress Bar

This is the default style and displays Chapters as inline markers in the progress bar.

Screenshot of the Progress Bar style Chapters

This displays Chapters in a dropdown menu below the Player.

Screenshot of the Dropdown style Chapters

Horizontal Tabs

This displays Chapters in a scrollable horizontal menu.

Screenshot of the Horizontal Tabs style Chapters

Custom Colors

You can also customize the colors of the Player icons. Click in the area you would like to customize, and either select a color from the color picker, or type in the RGB hex code. To remove a color and restore to the defaults, delete the hex code.

Screenshot of the Player color customization form

Area Description
Background The background of the playback menu and all icons
Icons The foreground of the text and icons
Hover The foreground of the text and icons when you hover over them

We recommend that you select a color scheme that has good contrast between the background and the other two options. You can check your compliance against WCAG 2.1 accessibility standards with this tool.


Getting Started
Your Library
Managing Media
Channels
Embedding Your Media
Media Players
Managing Your Account
Managing Events
Technical Information