Tutorial

Set the Look and Feel of the Audio and Video Players

The look and feel of the audio and video players on your site can be set so each time a new player is created the look and functions are custom for your site.

When setting up the player default settings for the size, behavior and colors, those settings will always be preset when creating a new audio or video player for your site.

Click on each section to expand for more information

1. Under 'Multimedia' choose 'Player Defaults'

Under 'Multimedia' choose 'Player Defaults'

 

Player Defaults
2. In the top three fields, set the size of the players.

In the top three fields, set the size of the players. This includes the width and height for the video player and the width for the audio player.

 

Set the Look and Feel of the Audio and Video Players
3. The next 5 fields are for the behavior of the player.

 The next 5 fields are for the behavior of the player. 

  • Controls BelowIf that box is checked, the controls will be shown the whole time. If the 'Controls Below' is left unchecked, the bottom controls will only show when the user hovers over the video player.

  • Audio ResponsiveChecking that box will create a responsive video player that fills the width of the page.

  • Audio Autoplay Check that box if the audio or video file should automatically begin playing upon loading. Leave the box unchecked so the user has to manually click the play button to begin listening or watching.

  • Loop AudioWhen this box is checked, when the audio or video is completed, it will begin playing again from the start automatically

  • Audio VolumeChoose the initial volume setting for the audio or video file from the drop down box. The user can manually adjust the volume in the controls.

 

Set the Look and Feel of the Audio and Video Players
4. The final 5 boxes are for the colors of the player parts. Set a hexadecimal color code for the desired colors.

The final 5 boxes are for the colors of the player parts. Set a hexadecimal color code for the desired colors.

  • Button Color: Set the Color for the buttons on the control bar. Click in the box and enter the hexadecimal color if known, or click in the color box to choose a color.

  • Button Hover Color: Set the color for the buttons on the control bar when the user hovers over them. Click in the box and enter the hexadecimal color if known, or click in the color box to choose a color.

  • Progress/Volume Bar Color: Set the color for the volume and progress bars on the player. Click in the box and enter the hexadecimal color if known, or click in the color box to choose a color.

  • Playbar Background Color: Set the color for the color behind the volume and progress bars. Two colors can be set as the color will appear as a gradient. The first color will appear on the bottom and the second color will appear on the top. Click in the first box and enter the hexadecimal color if known, or click in the color box to choose a color. Repeat in the second box.

  • Screen Color:  Set the color for the background of the video. Click in the box and enter the hexadecimal color if known, or click in the color box to choose a color.

 

Set the Look and Feel of the Audio and Video Players
5. Click the 'Save Audio Player' button

Click the 'Save Audio Player' button

 

Set the Look and Feel of the Audio and Video Players
6. Those default settings will show when you create a new audio player or video player.

Those default settings will show when you create a new audio player or video player. If you do not want that setting for a particular player, simply update the setting in 'add video player' or 'add audio player'

 

 


Color Fields Shown On Video Player


Color Fields Shown on Audio Player