Skip to main content

Customize the Video Player Layout and Colors

Updated

Customize your video player by setting your corporate colors to make your video's reflect your brand.

You can set the default appearance for your video player at the library level, which will then be used as the default video player across all your videos.

Additionally you can override the colors and even the player used at each video level.

 

Set your default Video Player Style

  1. In Admin, browse to Appearance >Customize > Play Page tab
  2. Select Video Player collapsible menu
  3. Select Video Mode from the Player Template 
  4. Update your colors with the settings available:
    • Background Image: Upload a background image if you wish to use a background image rather than a color across your default video player.
    • Background Color: default is black #000000
    • Button Color: this is the outline of the Big Play button in the center of your video. This should be a different color to Media Control Bar.  default is white #ffffff
    • Media Control Bar: This is the color for the Big Play button and the media controls along the bottom of the video. ie. Play and Video Duration.  This is the recommended location to set your main corporate color.
    • Video Player Settings: This is the color of the icons along the bottom right hand corner of your video player. The icons are usually for Interactivity and Accessibility features. Default color is white
    • Logo Overlay: if you wish to display a small corporate logo on the top right hand corner of your video player. Recommended Image 120x50px, with a transparent background. 
      Here you can set the default player to be used across your video library

    • Custom CSS:  You can further customise the video player by adding your own CSS rules.

      When using Custom CSS, you only need to enter the CSS rules themselves.
      Do not include <style> opening or closing tags - these are already handled automatically by the platform.

    • Theatre Mode: Turn on to display the theatre mode option on the video player. Theatre mode enlarges the video within the page to create a more immersive viewing experience without entering full screen.
    • Theatre Mode On: Toggle on so the video player loads in theatre mode by default.

    • Disable Seek: Turn on to prevent viewers from jumping forward or backward within a video.

       

  5. Save

    The video player style settings will now be used throughout your video library.
    mceclip0.png

 

Overwrite the Default Player Color and Settings on a Video

  1. In Admin, browse to Videos >Select a Video from the list >Edit
  2. Select Play Page Tab
  3. Select Video Player collapsible menu
  4. Select Video Mode from the Player Template 
    • Default Player will use the player setting that are set for the Video Library.
  5. Select Video Mode from the drop-down menu
  6. Update the color's that you want to change for this video. ie, you might just change Media Control Bar to a color specific to an event.
  7. Save

    The Video will now use the new player style settings.

 

Related articles

Powered by Zendesk