This document aims to briefly explain and then provide examples of how AnyClip’s embedded Player can quickly be customized from a UI perspective. The instructions and examples here assume the Player in question has been embedded using a Content Management System (CMS) on a particular web page and that this page is visible to you in a standard web browser such as Chrome.

This document also assumes the person performing the customization procedures outlined below has basic CSS knowledge. A knowledgeable CSS coder will have numerous customization possibilities.

The objective of the following instructions is to introduce some of the main CSS classes that control how AnyClip’s Player looks on a page. Once an embedded AnyClip Player is before you in a browser, the Player CSS classes are accessed by clicking CTRL+ SHIFT+ I or FN+F12 in Windows or in Chrome choose the Controls menu → More Tools→Developer Tools. Choose Options + ⌘ + J if you have a Mac.

The Player-specific classes are usually identified by the attribute data-lrecss

We will cover the CSS classes that control the following visual elements of the Player as shown in the image below

Please note that there are other classes whose attributes can be changed and which govern the Player’s look & feel. This document presents only a few examples. An experienced CSS coder can implement a multitude of other styling options on a page where AnyClip is embedded.

It goes without saying that once all changes have been made to the CSS stylesheet you must copy and then paste the new CSS code in the relevant css style sheet linked to the page where AnyClip’s Player is embedded

The relevant class to change the video title is LRE-TITLE-TEXT CONTENT. Once Chrome’s Developer Tools are before you, use Chrome’s Inspector Tool by clicking it (or choose CTRL + SHIFT+C) and hover over the Video title as shown in the Player. Alternatively, search for class LRE-TITLE-TEXT CONTENT in the Elements pane of the browser.

Once the class has been selected, click the + symbol in the Developer Tools pane (New Style Rule) in order to create a new rule i.e. edit the rules of the class: color, font, font size or any other available rule.

In this example, we change the font and size of the title with the following code (which you can copy/paste to the Style Pane:

The result appears below. Here we changed the font to 25 pixels and changed the font to cursive.

The class governing the Player playback slider is VJS-PROGRESS-HOLDER VJS-SLIDER. Similarly to the section above, choose CTRL + SHIFT+C and hover over the Player slider shown below in purple to locate the relevant class. Alternatively, search for the class VJS-PROGRESS-HOLDER VJS-SLIDER in the Elements pane of the browser.

Once the class has been selected, click the + symbol in the Developer Tools pane (New Style Rule) in order to create a new rule or edit the rules of the class: color, height (thickness) etc.

Make sure to end any new code with the attribute “!Important”.

To change the rules governing the section of the Player slider showing how much of the video has been played back, edit the rule of class VJS-PLAY-PROGRESS VJS SLIDER-BAR.

Here we change the Playback slider to make it a bit thicker (10px) and then change its color to black. The code is shown below:

The result is as follows:

Here we change the color of the slider showing the portion of the video already played back (shown above in purple) to the color “aqua”. The code and the result are shown below.

The class governing the Play button on the Playback slider is VJS PLAY CONTROL VJS CONTROL VJS BUTTON. Depending on the state of the Player, selecting the Play button with the Inspector Tool will scroll to the aforementioned class or the Class VJS-PLAY-CONTROL VJS-CONTROL VJS-BUTTON VJS-PAUSED (when the video is paused).

Proceed to make styling changes as described above. Once all your coding changes have been completed, click the Inspector Stylsheet link on the right-hand side in the Styles pane, copy all the changes you’ve made and paste onto your CMS.

In this example we change the height of the Player’s Play/Pause button to 25px. The code and result are shown below.

As described above there are almost endless possibilities that allow you to change AnyClip’s Player using simple CSS code. Here are a few more classes and options you can use to customize the Player’s look and feel:

1. Play Progress Bar

2. Volume Level

3. Time Tooltip

1. Half Line

2. Full Progress Bar

3. Read More Link

4. Arrow & Border