Customizing Player Appearance - Legacy Skin

Product(s)
Video Cloud
Brightcove Player
Role(s)
Player Developer
Topic(s)
Styling

This topic is a primer on customizing the appearance of the new player. The content uses Chrome's development tools, but all modern browsers have equivalent functionality. For a brief introduction to using development tools in different browsers see the Debugging Basics document.

Create own skin

If you wish to not use the default skin and create your own, this is possible using the Player Management API. The Player Configuration Guide provides the necessary information.

Player

You can alter the appearance of the player, but you must first have a way to address it. To see this, browse an HTML page with the player embed_in_page code inserted. In the Elements section of the Development Tools locate the first <div> and you will see it has a class with the value video-js assigned, among others.

customize-player-elements

Once you know this, you can use styles to alter the player itself. For instance, to change the size of the player you can use this style:

<style>
  .video-js {
    width: 640px;
    height: 360px;
  }
</style>

iframe player

If you are using the iframe implementation of the player the situation is different. You will still see the player with the video-js class, but it will be, of course, inside the iframe.

iframe-player-elements

The styles you create will still work with the player in the iframe, but a CSS file will need to be created and associated with the player using Studio. You do this by going to the Players module, then click on the video with which you wish to associate the CSS, then in the Plugins section add the path you your CSS file.

If you do wish to customize the iframe itself, you can do this by adding a class attribute to the iframe element (line 27). In this case, the class value is videoFrame. Then use a <style> tag to modify as wished. In the example below the width and height are altered.

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Customize iframe</title>

  <!-- Page styles -->
  <style>
    .videoFrame {
      width: 640px;
      height: 360px;
    }
  </style>
</head>

<body>
  <iframe class="videoFrame" src='//players.brightcove.net/1752604059001/68f30408-8fb4-431d-accb-8c5baa8c4790_default/index.html' allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>
</body>

</html>

Play button

If you wish to alter the appearance of the play button you first need to know how to address it. In Chrome, be sure the Development Tools are open and then right click on the button. From the selections that appear choose Inspect Element.

inspect-button

In the Elements section of the Development Tools, you will see the HTML code that corresponds to the button element.

big-play-button

From the highlighted code above, you can see the class assigned to the button is vjs-big-play-button. The play button's color (to match the tiger) and opacity will be changed with these styles:

  <style>
    .vjs-big-play-button {
      background-color: #B37D5B;
      opacity: .6;
    }
    .video-js {
      width: 640px;
      height: 360px;
    }
  </style>

You would think that this approach would work, but it does not. When working with CSS you need to be aware of property specificity. This refers to how the browser determines which property values get applied to an element based on their relevance.

One way to apply the button changes is to reference an id in the CSS selector. This is because id's have a high CSS specificity. For more details, see the CSS specificity section

First, add an id attribute to the div element for the player code.

    <video-js id="video_1"
      data-account="1752604059001"
      data-player="68f30408-8fb4-431d-accb-8c5baa8c4790"
      data-embed="default"
      class="video-js" controls></video-js>

    <script src="//players.brightcove.net/1752604059001/68f30408-8fb4-431d-accb-8c5baa8c4790_default/index.min.js"></script>

Then, reference the player's big play button in the CSS as follows:

  <style>
    #video_1 .vjs-big-play-button {
      background-color: #B37D5B;
      opacity: .6;
    }
    .video-js {
      width: 640px;
      height: 360px;
    }
  </style>

Here is the result of changing the button from dark grey to orange:

orange-play-button

Center play button

You can center the play button both horizontally and vertically by using the following styles:

top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;

Hide play button

You can completely hide the play button by using the following style:

display: none;

Experiment

The following CodePen permits you to experiment with the play button. Note that the triangle in the play button is actually a font, and its size is controlled with a font-size style.

See the Pen Big Play Button Customization by Matt Boles (@mboles) on CodePen.

Progress & volume

The last appearance customization we'll look at in this doc will be to change the color of the progress and volume indicators. The default color for both is fuchsia, as shown here:

progress-and-volume

The challenge here is to find the class names for the elements. Using the same technique as above, right-clicking on an element choosing Inspect Element, you can get to the whole progress indicator, then drilling down you will see the vjs-play-progress class.

In the Chrome Elements panel, mouse over the div element with a class name of vjs-play-progress to see the following in the player:

progress-control

A tool in Chrome is helpful when checking for the volume level element. Note that you only see the volume level when you mouse-over (hover) the volume button. To have the volume level shown when inspecting and finding the correct element, perform these steps:

  • Right-click on the volume button and inspect it
  • Click the Toggle Element Button (highlighted in blue below) in the top-right of the Styles section
  • Check the :hover box (highlighted in red in the Styles section) to simulate the mouse over while you are inspecting the elements
  • Drill down until you find the volume level element (highlighted in red in the Elements section)
inspect-audio-button

Now the background-color of both of these elements needs to be styled. You want them the same color as the button, so alter your styles as shown here:

  <style>
    #video_1 .vjs-big-play-button {
      opacity: .6;
    }
    #video_1 .vjs-big-play-button,
    #video_1 .vjs-play-progress,
    #video_1 .vjs-volume-level {
      background-color: #B37D5B;
    }
    .video-js {
      width: 640px;
      height: 360px;
    }
  </style>

Notice that we are prefixing each class with the id of the player's div element. This provides relevance for the class changes with regard to CSS specificity. This will be talked about in the next section.

The results appear as follows:

progress-volume-styled

This primer has given you a quick look at styling the player. As you have seen, the approach is to find the class name that corresponds to the element you wish to change, then style it. Remember as mentioned in the iframe section of this document, if you are using the iframe player, you must put the styles in a file then use a curl statement to associate the styles with the player.

Remember that it is a best practice to add the customizations to your player configuration so they can be optimized and travel along with your player wherever it's embedded.

Controls visibility

You can dictate how long the controls are visible. You use the options().inactivityTimeout property to do this. You set the value equal to a number which is the seconds the controls stay visible after end of any activity on the player. To have the controls remain visible all the time set the value to 0.

The following code show setting the inactivityTimeout to 0, which will cause the controls always to be visible.

<video-js id="myPlayerID"
  data-account="1752604059001"
  data-player="04ee9f58-9d08-43ea-803f-abda86776db2"
  data-embed="default"
  class="video-js" controls></video-js>
<script src="//players.brightcove.net/1752604059001/04ee9f58-9d08-43ea-803f-abda86776db2_default/index.min.js"></script>

<script>
  videojs.getPlayer('myPlayerID').ready(function() {
    var myPlayer = this;
    myPlayer.options().inactivityTimeout = 0;
  });
</script>

Control bar icon order

You can control the order of icons in the control bar by using the order style assigned a number. For instance, 5 will place an icon after the progress bar but before the volume button, and 9 will place the icon on the far right side of the control bar. For older browsers some more styles may be required, as shown here:

{
  order: 5; /* after the progress bar but before the volume button */
  -webkit-box-ordinal-group: 5;
  -moz-box-ordinal-group: 5;
  -webkit-order: 5;
  -ms-flex-order: 5;
}

An example of adding an icon (for downloading a file in this case) is shown in the Brightcove Player Sample: Download Video Plugin document.

CSS specificity

CSS specificity refers to the way browsers determine which property values get applied to an element based on their relevance. For details about this concept, review the Specificity article.

In Chrome, inspect the big play button. Notice that the background property is set using multiple classes. This means that we cannot use just the one .vjs-big-play-button class to override this property.

play-button-classes

Here are three approaches to customize the big play button:

  • Reference an id assigned to the player.
  • Use multiple classes to raise the relevance of the properties.
  • Use JavaScript to set the id attribute on the player and then reference it in the CSS.

Referencing an id

Since an id attribute has a high relevance regarding CSS specificity, adding an id to the CSS selector will override the background-color property.

If you haven't already done so, add an id attribute to the video element as follows:

    <video-js id="video_1"
      data-account="1752604059001"
      data-player="68f30408-8fb4-431d-accb-8c5baa8c4790"
      data-embed="default"
      class="video-js" controls></video-js>

In the CSS, add the id value to the .vjs-big-play-button class selector. Override the background color and opacity as follows:

  <style>
    #video_1 .vjs-big-play-button {
      background-color: #B37D5B;
      opacity: .6;
    }
    .video-js {
      width: 640px;
      height: 360px;
    }
  </style>

You should see that the big play button is now orange.

orange-play-button

Using multiple classes

Since the background property for the big play button is set using two classes, you will need at least two classes in the CSS selector to overrirde this property.

Add the .video-js class to the .vjs-big-play-button class selector. Remember that the .video-js class is set on the video container.

With these values, we are saying select all elements with a class name of vjs-big-play-button which are decendents of elements with a class name of .video-js.

<style>
  .video-js .vjs-big-play-button {
    background-color: #B37D5B;
    opacity: .6;
  }
  .video-js {
    width: 640px;
    height: 360px;
  }
</style>

You should see that the big play button is now orange. Working with multiple classes can be tricky and may affect multiple elements, whereas an id is specific to one element.

Using JavaScript

You can also use JavaScript to dynamically add an id to the big play button. Then you can reference that id from the CSS.

Add code to add an id to the big play button element.

  • Line 173: Gets a reference to the first element which has a class of vjs-big-play-button.
  • Line 174: Adds an id attribute to the big play button.
  <script type="text/JavaScript">

    var playButton = document.getElementsByClassName("vjs-big-play-button")[0];
    playButton.setAttribute("id", "myPlayButton");

  </script>

In the CSS, change the selector to use the myPlayButton id name.

  <style>
    #myPlayButton {
      background-color: #B37D5B;
      opacity: .6;
    }
    .video-js {
      width: 640px;
      height: 360px;
    }
  </style>

You should see that the big play button is now orange.