Overview

A corporation always has its primary focus on providing a streamlined workflow and experience to its employees and customers, alike. Creating brand awareness and moderating processes to comply with brand identity helps a business form a strongly unique standpoint in the industry. While doing so, it is also imperative to make sure that apart from the in-house business processes and their implementation, any digital content produced and published for lead generation, customer interaction, and product familiarization should also behold a signature color theme and design. 

Branding does quite a lot more for a business than just making it look visually appealing to the eye. Branding helps in developing employee and customer coalescence and offers a desirable user experience to viewers.


Concept

VIDIZMO allows users to brand their players according to various different use-cases as per customer needs. Through branding on individual player templates, you get the ability to custom-choose controls on your player, toggle on/off whether someone can select different quality renditions of a video, configure if a video/audio should play as muted by default until unmuted by the user, switch on/off subtitles control, etc that help comply with your organizational goals and relevant use-cases, so on and so forth. This helps familiarize viewers with the content and creates an environment tailored to their needs. 


However, VIDIZMO takes it one step further by allowing enterprises to add their own styling to various aspects of the player's design. This can be done by updating custom CSS (cascading style sheets) in your portal's settings under Branding section.


Before you start

  • Only technically advanced users, who are familiar with HTML and style sheets, will be able to style UI elements using custom CSS. 
  • Make sure to log in as an Administrator or Manager to style player using CSS.
  • The visibility of options as configured in the player template depends upon the configured media settings and portal settings. For example, even if you have enabled comments in the player template but disabled them in the media settings, you would not be able to view the comments icon on the player.


Branding using SASS Template

VIDIZMO has defined a basic template for branding CSS using SASS framework making it easier for users to modify values and play around the design of the player as they see fit. When the SASS code is processed, it takes the variables we define for the $font-stack and $primary-color etc and outputs normal CSS with our variable values placed in the CSS. After that we need to copy that output CSS and paste it in the custom CSS text box following which we would press the ‘Update’ button, and branding will apply in all video players on which that template applies. 


Please refer to https://sass-lang.com/ for further detail about SASS. 


Click here to view the basic SASS template, against which you can see the CSS that you are required to paste under Custom CSS while configuring a Player Template in Branding settings of your Portal.


Understanding SASS Variables


1. Color Theme


i. $primary-color: #c5c7c3;

This variable defines the basic colour used in player branding which is reflected in all icons displayed below the seekbar for accessing options such as play, go forward by a frame, go backward by a frame, mute, the timestamp and other numerous settings enabled in the player template. The default value has been set to a subtle tone of gray.

ii. $secondary-color: gray;

This variable defines the basic colour used in player branding which is reflected as the background colour of the overflow menu of settings icon at the bottom-right of the VIDIZMO player. It helps you navigate to many options available in the player where you select a quality rendition or show/hide annotations in a video, if enabled in player template. The default value has been set to gray.

iii. $secondary-color-hover: #0af;

This variable defines the layered colour used in player branding which is reflected when you hover over the different options in the overflow menu of settings icon at the bottom-right of the VIDIZMO player. The default value has been set to a tone of sky blue.

iv. $big-playbtn-bgcolor: #0af;

This variable defines the colour of the play icon displayed in the middle of the player which is used to play/pause the video as soon as the playback page is loaded. This value fills a solid color in the inside of the play icon. The default value has been set to a tone of sky blue.


Font Styling


i. $font-stack: "Roboto", sans-serif;

This variable helps centrally define the font style of all the text displayed within a player, be it the labels that help you understand what an icon represents or the options in the settings menu to navigate to the right control in the player. The default value has been set to "Roboto", sans-serif.

ii. $font-size: 15px;

This variable helps centrally define the size of the font that reflects in all the text displayed within a player, be it the labels that help you understand what an icon represents or the options in the settings menu to navigate to the right control in the player. The default value has been set to 15px.

iii. $font-color: #fff;

This variable helps centrally define the colour of the font that reflects in all the text displayed within a player, be it the labels that help you understand what an icon represents or the options in the settings menu to navigate to the right control in the player. The default value has been set to white.


Video Scrubbing


i. $seekbar-color: #0af;

This variable defines the colour of the seekbar in the player using which you can scrub through a video at varying speeds as per convenience. It is used in player branding where the colour is reflected in the timeline bar till the point video has been played so far. The default value has been set to a tone of sky blue.

ii. $time-tooltip-color: #fff;

This variable defines the colour of the timestamp displayed as a tooltip when hovered over the seekbar in the player using which you can scrub through a video at varying speeds as per convenience. This value sets the color of the text (time) inside the tooltip. The default value has been set to white.

iii. $time-tooltip-bgcolor: #9e9e9e;

This variable defines the background colour of the timestamp displayed as a tooltip when hovered over the seekbar in the player using which you can scrub through a video at varying speeds as per convenience. This value sets a solid color as the background inside the tooltip for greater visibility of timestamp. The default value has been set to a darker shade of grey.

iv. $thumbnail-border-color: #c5c7c3;

This variable defines the border colour of the thumbnails displayed when hovered over the seekbar in the player and scrubbed through the video. This value sets a solid color as the border of the thumbnail for a prominent outline. The default value has been set to a subtle tone of gray.




Convert SASS to CSS

Now, after making changes to the template here, copy the CSS code compiled against your changes, as shown below. You will also see a brief indication at the top-right of your CSS code reflecting the time it took to compile your changes.



How to Brand Player using Custom CSS

1. From the Portal's Homepage:

i. Click on the menu icon on the top left-hand corner of the screen to bring up the left navigation pane.

ii. Then click on the down arrow to expand the Admin section.

iii Select Settings to open the Portal Settings navigation panel.





2. From the Portal Settings navigation pane:

i. Click on the Branding to expand the list of operations that can be performed.

ii. Select Player Template to navigate to your respective template.

iii. Hover over the template against which you wish to update custom CSS to see the control icons appear at the end of the row. Click Edit icon.




3. On Player Template screen:

i. Here, you may write the custom CSS to change colors and styling of various elements of the player's user interface using the SASS template explained in detail here: Understanding Customized Branding for Player.

ii. Click Update to save the changes.




A notification will be displayed briefly stating: Portal details have been updated successfully. After saving changes, you will be able to see the UI changes reflect in your portal.