Customizing Player Appearance

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

This topic is a primer on customizing the appearance of Brightcove 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 in-page embed 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, right click on the button. From the selections that appear choose Inspect. When you select Inspect, Chrome'sDevelopment Tools will open.

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:

.vjs-big-play-button {
  background-color: #B37D5B;
  opacity: .6;
}

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 add another class in the selector. For instance, you can use the .video-js class to increase the selector's specificity. For more details, see the CSS specificity section

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

.video-js .vjs-big-play-button {
  background-color: #B37D5B;
  opacity: .6;
}

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

orange-play-button

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 5.x Big Play Button Customization by Matt Boles (@mboles) on CodePen.

Controls visibility

You can control if you want the controlbar, and controls contained therein, visible or not. If you wish to hide the controlbar from the start of player creation you can use this style:

.video-js .vjs-control-bar {
  display: none;
}

If you wish to do this dynamically based on some event, you can use the controlBar.hide()/show() methods. The code snippet below demonstrates the methods use (this assumes you have an id with a value of myPlayer on the video):

<video id="myPlayerID"
	data-video-id="5781068653001"
	data-account="1507807800001"
	data-player="default"
	data-embed="default"
	data-application-id
	class="video-js"
	controls></video>
<script src="//players.brightcove.net/1507807800001/default_default/index.min.js"></script>

<p><button onclick="hideBtn()">hide controls</button></p>
<p><button onclick="showBtn()">show controls</button></p>

<script>
var myPlayer;
	videojs("myPlayerID").ready(function(){
		myPlayer = this;
	});

	function hideBtn() {
		myPlayer.controlBar.hide();
	}

	function showBtn() {
		myPlayer.controlBar.show();
	}
</script>

Controls never hide

You can also make it so the controls never hide. To do this use the transform.none style. The selector is very long as six classes are used for the specificity of transforms.

.bc-player-default_default.not-hover.vjs-has-started.vjs-paused.vjs-user-active .vjs-control-bar,
.bc-player-default_default.not-hover.vjs-has-started.vjs-playing.vjs-user-active .vjs-control-bar,
.bc-player-default_default.not-hover.vjs-has-started.vjs-paused.vjs-user-inactive .vjs-control-bar,
.bc-player-default_default.not-hover.vjs-has-started.vjs-playing.vjs-user-inactive .vjs-control-bar,
.bc-player-default_default.vjs-has-started.vjs-playing.vjs-user-inactive .vjs-control-bar,
.bc-player-default_default.vjs-has-started.vjs-paused.vjs-ad-playing.vjs-user-inactive .vjs-control-bar {
    transform: none;
    -webkit-transform: none;
    -ms-transform: none;
}

Progress bar

Now you will see how to change the color of the progress indicator. The default color for indicator is fuchsia, as shown here:

customize-player-elements

The challenge here is to find the class names for the elements. Using the same technique as described earlier in the document, right-clicking on an element and choosing Inspect, then drilling down you will see the vjs-play-progress class.

progress-and-volume-elements

The background-color changes the color of the element and needs to be styled. The needed style is shown here:

.video-js .vjs-play-progress {
  background-color: green;
}

Notice that the .video-js class was added into the selector. This is done to increase the selector's CSS specificity.

The results appear as follows, showing a now green progress bar:

customize-player-elements

Volume controls

You can customize the volume control by using CSS or by passing in the options object during player creation.

Update using CSS

Now you will see how to change the color of the volume controls. The default look is shown here, a white volume button with a fuchsia volume level bar:

customize-player-elements

To change the color of the volume button, and the mute button when you click it, use the selector shown here:

.vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal {
  color: yellow;
}

To change the color of the volume bar, the background-color of the element needs to be styled. The needed style is shown here:

.video-js .vjs-volume-level{
  background-color: yellow;
}

Notice that the .video-js class was added into the selector. This is done to increase the selector's CSS specificity.

The results of styling the button and volume bar are shown here:

customize-player-elements

Update using options object

To change the layout of the volume control, you can pass the options object into the bc() method as follows:

  1. Delay player creation by removing the following attributes from the video tag:
    • data-account
    • data-player
    • data-video-id
  2. Define the options object so that the volumePanel is vertical and not inline with the controlbar.
    var options = {
      controlBar: {
        volumePanel: {
          inline: false,
          vertical: true
        }
      }
    };
  3. Add the player attributes that were initially removed.
  4. Create the player by calling the bc() method with the options object.
    bc("myPlayerID", options);
  5. For details, see the Vertical Volume Control player sample.
    customize-player-elements

Fonts

The title and description appear when the player is first loaded, and when the user hovers over the player. You can change the style for the fonts for the title and description, either together or separately. The HTML for the dock appears as shown in the following screenshot. Note that there is a <div> element with a class of vjs-dock-text that contains two other <div> elements that contain the title and description.

dock text selectors

You can affect both the title and description by setting a style on the vjs-dock-text class. Note that styles set on the .vjs-dock-title and .vjs-dock-description will, of course, not be completely overridden by the style set at a higher level. Some styles are inherited, as shown by the following style and its result on the text:

.video-js .vjs-dock-text {
  color: yellow;
  font-size: .7em;
}
dock text selector example

You can directly style the individual title and description. The following shows styles set on the .vjs-dock-title and .vjs-dock-description class selectors, with the resulting text displaying the styles:

.video-js .vjs-dock-title {
  color: red;
  font-size: 1.5em;
}
.video-js .vjs-dock-description {
  color: yellow;
  font-size: 1.0em;
}
title and description selectors

Controlbar icon manipulation

Controlbar icon order determined by the order of the HTML <div>s in the parent controlbar <div>. Here you see the controlbar <div> with all of its children.

elements-controlbar-div

Generally, this is the approach to take when placing in icon in the controlbar:

  • Dynamically build the element you wish to insert into the controlbar.
  • Get a reference to the controlbar element.
  • Get a reference to the element you wish to insert your new element in front of in the controlbar.
  • Use the JavaScript insertBefore() method to place the icon.

Specifically, the following code is used to insert a download video icon in front of the volume icon:

  • Lines 280-285: Style for the download button.
  • Lines 291-295: Assign variables and create HTML elements for:
    • The <div> which will contain the icon for the download icon.
    • The anchor tag which make the icon clickable.
    • The icon image itself.
  • Lines 297-2980: Assign and id and CSS classes to the new element.
  • Line 300: Assign a source to the image.
  • Line 301: Assign an href to the link.
  • Line 302: Append the image to the link.
  • Line 303: Append the link to the dynamically created <div>.
  • Line 306: Get a reference to the controlbar to use with insertBefore().
  • Line 308: Get a reference to the element which the new icon will be insert in front of, to use with insertBefore().
  • Line 310: Insert the dynamically created element.
<!-- styles for page -->
  /* Style the download icon */
  #downloadButton {
      width: 34px;
      height: 33px;
      margin-top: 6px;
  }
</style>

<script type="text/javascript">
  videojs('myPlayerID').ready(function(){
    // Create variables and new div, anchor and image for download icon
    var myPlayer = this,
      controlBar,
      newElement = document.createElement('div'),
      newLink = document.createElement('a'),
      newImage = document.createElement('img');
    // Assign id and classes to div for icon
    newElement.id = 'downloadButton';
    newElement.className = 'downloadStyle vjs-control';
    // Assign properties to elements and assign to parents
    newImage.setAttribute('src','http://solutions.brightcove.com/bcls/brightcove-player/download-video/file-download.png');
    newLink.setAttribute('href','http://www.brightcove.com');
    newLink.appendChild(newImage);
    newElement.appendChild(newLink);
    // Get controlbar and insert before elements
    // Remember that getElementsByClassName() returns an array
    controlBar = document.getElementsByClassName('vjs-control-bar')[0];
    // Change the class name here to move the icon in the controlBar
    insertBeforeNode = document.getElementsByClassName('vjs-volume-menu-button')[0];
    // Insert the icon div in proper location
    controlBar.insertBefore(newElement,insertBeforeNode);
  });

Here you see the result of the code, with the newly inserted icon highlighted in yellow:

download-icon-before-volume

If you wish to have the icon in a different location, you need only to change the code which gets the element to insert in front of. For instance, to move the new icon in front of the fullscreen button, use this:

insertBeforeNode = document.getElementsByClassName('vjs-fullscreen-control')[0];

The result would appear as follows:

download-icon-before-fullscreen

Icon on far right

If you wish the icon to appear at the far right of the controlbar, you would replace the insertBefore() with the appendChild() method, as shown here:

controlBar.appendChild(newElement);

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

Use the spacer

Although the techniques above work for placing icons on the controlbar, it is possible they will not be compatible with other code that manipulates the controlbar. Also, you most likely would not want to abstract the code into a plugin for general reuse.

Weaknesses in the previous paragraph can be overcome by using the special spacer element inserted into the controlbar especially for adding icons. The drawback of the spacer is you do not have full control over where the icon can be placed, whereas you do using the techniques shown earlier in this section.

The spacer element is located in the controlbar between the time information on the left and the fullscreen icon on the right, as shown in the following screenshot (highlighted in the green oval). Note in the Elements section of the Dev Tools the element is defined an HTML <div>.

spacer

To place an icon in the spacer element, you use the following code, which is very similar to the code shown earlier in this section. The result of the code is shown in the screenshot which follows the code snippet.

// Get the spacer element
spacer = document.getElementsByClassName('vjs-spacer')[0];
// Place the new element in the spacer
spacer.appendChild(newElement);
spacer-left

If you wish to place the icon on the right side of the spacer, another line of code needs to be used. The spacer layout is controlled by an HTML Flexbox. So adding a Flexbox style you can push the added icon to the right. The result of the code is shown in the screenshot which follows the code snippet.

// Set the content of the spacer to be right justified
spacer.setAttribute("style", "justify-content: flex-end;");
spacer-right

Remove fullscreen button

There can be issues if you permit fullscreen viewing of videos on iOS, detailed in the iOS and Brightcove Player document. If you wish to remove the fullscreen button from the controlbar you can so using this code:

<script type="text/javascript">
  videojs('myPlayerID').ready(function(){
    var myPlayer = this,
      fullScreenElement = document.getElementsByClassName("vjs-fullscreen-control")[0];
    if (videojs.browser.IS_IOS ) {
      fullScreenElement.parentNode.removeChild(fullScreenElement);
    }
  });
</script>

Note the if statement so the button is only removed on iOS devices.

Controlbar icon "glow"

You can change the text shadow (sometimes referred to as the "glow") of the icons in the controlbar. For instance, you may want to change the color or increase the glow to bring more focus on the icon. The following screenshot shows the text shadow in red.

red text shadow

The affect shown is done by changing the CSS text-shadow. The selector determines that the change will only occur with the icon has focus or hover states.

.video-js .vjs-control:hover:before, .video-js .vjs-control:focus:before {
  text-shadow: 0 0 1em #f00,0 0 1em #f00,0 0 1em #f00;
}

For more information on the rather complex text-shadow style, see MDN's text-shadow document.

Hover gradient

When the player is first loaded, and when you mouse over the player, you see the video title displayed, as well as a black to transparent gradient over the top portion of the player. This section will show you how to alter the gradient.

The actual gradient is controlled by the CSS linear-gradient function in the vjs-dock-text HTML <div>. The size of the gradient can be controlled by the height of the vjs-dock-text HTML <div>. Here is that element, and its children, from the player:

<div class="vjs-dock-text">
  <h1 class="vjs-dock-title">Tiger</h1>
  <h2 class="vjs-dock-description"></h2>
</div>

The default values for the gradient use the rgba() (red-green-blue-alpha) function, as shown here:

linear-gradient(180deg,rgba(0,0,0,.8) 25%,transparent 100%);

These values cause the gradient to horizontally fade from black, with an alpha of .8, to transparent. The value of 25% is a cut off value, meaning the value set in the rgba function will be used for the first 25% of the space before the fading to transparent begins.

For instructional purposes, as you would not use this gradient in production, the following style creates the gradient in the screenshot.

.video-js .vjs-dock-text {
  background: linear-gradient(45deg, rgba(0,0,255,.8) 35%, transparent);
  height: 80%;
}
bad blue gradient

In this example, a blue gradient with a .8 alpha is applied at a 45 degree downhill angle. The color/alpha set in the linear gradient will be used for the first 35% of the gradient before it begins to fade. Also, 80% of the element height is used.

The following CodePen permits you to experiment with values. Start the video and mouse in and out to see the subtle gradient used by default.

See the Pen Hover Gradient Luna Skin by Brightcove Learning Services (@bcls) on CodePen.

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

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.png

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 override 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 decedents 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.

Component selectors

These screenshots and following table show the components and the CSS selectors needed to manipulate that component. For more information on the components themselves see the Components Overview doc.

On player load and hover

components on load

During playback

components playback

Summary of component selectors

Component Selector
BigPlayButton .video-js.vjs-mouse .vjs-big-play-button
ControlBar .video-js .vjs-control-bar (Inherited by icons in the ControlBar, but NOT the ProgressControl)
    PlayToggle .video-js .vjs-play-control
    MuteToggle .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal
        VolumeBar .vjs-volume-bar.vjs-slider-bar.vjs-slider.vjs-slider-horizontal
            VolumeLevel .video-js .vjs-volume-level
    CurrentTimeDisplay .video-js .vjs-current-time
    TimeDivider .video-js .vjs-time-divider
    DurationDisplay .video-js .vjs-duration
        SeekBar .video-js .vjs-progress-control.vjs-control
        LoadProgressBar .video-js .vjs-load-progress
        PlayProgressBar .video-js .vjs-play-progress.vjs-slider-bar
    ChaptersButton .video-js .vjs-chapters-button.vjs-menu-button
    CaptionsButton .video-js .vjs-captions-button.vjs-menu-button
    FullScreenToggle .video-js .vjs-fullscreen-control.vjs-control
DockText .vjs-dock-text (Inherited by both DockTitle and DockDescription)
    DockTitle .vjs-dock-title
    DockDescription .vjs-dock-description

If the selector you are seeking is not in the table, please let us know by emailing the Knowledge Team and we will get it into the table.