Quick Start: Player Customization - Legacy Skin

In this topic, hands-on steps are provided that when followed customizes the appearance of the Brightcove Player. To customize the appearance of the Brightcove Player you need to use Cascading Style Sheets (CSS). This document will go through the process of changing the appearance and location of the play button that initially overlays the video.

Overview

This document will have several sections as using CSS with the in-page embed and the iframe implementations of the player are quite different.

The content in this document 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.

Determine player selector

CSS selectors allow you to select and manipulate HTML elements on a page. CSS selectors are used to "find" (or select) HTML elements based on their id, class, type, attribute, and more. The first thing you must do when trying to alter the look of an element on an HTML page is determine the selector to use to address the element. The following steps show how to find the selector for the player and then change the size of the player.

In Video Cloud Studio, open the Media module and select a video to publish.
Copy the In-Page publishing code.
Using your HTML editor, create a new HTML page.
Paste the publishing code into the body of your HTML page.
Browse the newly created page. By default, the player will be sized with default dimensions of 300 x 150 pixels.
Open your browser's development tools and drill down into the HTML to find the div tag that surrounds the player. You will see the div tag has a class of video-js. The div that contains the player will always have a class of video-js. video-js is the class name we will need when styling the player.
Check the screenshot below to see the class highlighted in red. Highlighted in green is the video tag, which is Brightcove Player.

Note: Depending on the operating system and browser being used, the Flash fallback version of the player may be displayed. If your player is using the Flash fallback version of the player, you will not see a video tag. Instead you will see the div surrounding an objecttag, as highlighted below.
Now that you know the correct class to use for a CSS selector, we can use that class selector to change the size of the player. The style block below should be placed just above the end of the head section of your HTML page. In CSS terminology, this is an example of using a class selector.
```
        <style>
          .video-js {
            height: 344px;
            width: 610px;
          }
        </style>
      </head>
```
Save and browse your HTML page and you will see the player has a new size.

Play button selector

Another approach is going to be used to find the selector for the play button. The following steps show you how to find the correct selector for the play button and then change its appearance.

Browse your HTML page.
Right click on the play button that overlays the player and select Inspect Element.
Note that the div tag that is highlighted represents the play button and has a class of vjs-big-play-button.

Alter your styles to include CSS that changes the color and opacity of the play button (lines 17-18) as well as centers the button inside the player (lines 19-23).

      <style>
          .video-js {
            height: 344px;
            width: 610px;
          }
          .vjs-big-play-button {
            background-color: red;
            opacity: .3;
            top: 0px;
            left: 0px;
            right: 0px;
            bottom: 0px;
            margin: auto;
          }
        </style>

Browse your page and you will see not all the styles have been used. The button is not red.
Look to the right of your developer tools and you will see a summary of your styles. You can look down and see that changing the background to red is overridden, represented by it being crossed out.

Note: In Safari, the style may not be crossed out even though it is being overridden.

What has happened is that numerous changes are made to the background color. The style you set has been overridden in the "cascading" part of CSS. You can change this by utilizing functionality of CSS called specificity. Specificity determines which CSS rule is applied by browsers and is a type of weighting that has a bearing on how your cascading style sheet (CSS) rules are displayed. Using specificity, you can make your style more important than others, forcing it to be used. There is a brief introduction to CSS specificity in the Customize Player Appearance - Legacy Skin doc, and numerous references in any search.
Note that the div tag surrounds the player has numerous classes associated with it.
In this case, using the combination of video-js and vjs-mouse will "boost" your styles to take precedence. Alter your styles to use the new combination selector. Note that there is no space between the first two classes, but there is one before the last class (details of why can be found in rules for specificity).
```
          .video-js.vjs-mouse .vjs-big-play-button {
            background-color: #ff0000;
            opacity: .3;
            top: 0px;
            left: 0px;
            right: 0px;
            bottom: 0px;
            margin: auto;
          }
```
Browse your page and see that all styles are now applied.
Again look to the right of your developer tools and you will see a summary of your styles. Now you see that your background color change is not overridden.

In-page embed

When working with selectors and styles above, the results were used with the in-page embed implementation of the player, as shown here:

      <!doctype html>
      <html>
      
      <head>
          <meta charset="UTF-8">
          <title>Embed in page tester</title>
         <style>
          .video-js {
            height: 344px;
            width: 610px;
          }
          .video-js.vjs-mouse .vjs-big-play-button {
            background-color: red;
            opacity: .3;
            top: 0px;
            left: 0px;
            right: 0px;
            bottom: 0px;
            margin: auto;
          }
         </style>
      </head>
      <body>
      
        <video
          data-video-id="4443311217001"
          data-account="1507807800001"
          data-player="30a9c9e0-295b-4102-a7af-a3f86bba91ab"
          data-embed="default"
          class="video-js" controls></video>
        <script src="//players.brightcove.net/1507807800001/30a9c9e0-295b-4102-a7af-a3f86bba91ab_default/index.min.js"></script>
      
      
      </body>
      </html>

This is a very common way to use CSS with an HTML page. You see the style block is on the page with the video tag.

Note: Depending upon your CSS experience, you may be wondering why the code above did not assign an id attribute to the video tag. You could then use a selector like #myPlayer .vjs-big-play-button. In fact, you could have and it would have worked. The problem is, the CSS created using id selectors will not work when using the iframe player implementation, so only existing class names were used. By not using an id attribute, the styles will be directly applicable to iframe player implementations.

iframe

The iframe implementation, not surprisingly, places the Brightcove Player in an iframe that you then place in an HTML page. You can style the actual iframe itself, change its size for instance, using styles on the page that contains the iframe, but styles on page of the iframe DO NOT cascade into the iframe itself. The iframe literally pulls in a separate HTML page, so desired styles for the contents of the iframe must be associated with the HTML page in the iframe.

When using the iframe implementation of the Brightcove Player, the steps to apply CSS are:

Place styles in an Internet accessible file
Link the stylesheet to the player (done using Studio or the Player Management API)

In Studio, publish a video and copy the code for an iframe implementation of the player.
In your HTML page, replace the in-page embed code with the iframe code.
Change the .video-js class selector to an element selector using iframe as the element. Leave width and height the same, as shown here:
```
  iframe {
      height: 344px;
      width: 610px;
    }
```

Check to be sure your HTML page looks similar to the following:

      <!doctype html>
      <html>
      <head>
        <meta charset="utf-8">
        <title>iframe tester</title>
      
         <style>
          iframe {
            height: 344px;
            width: 610px;
          }
          .video-js.vjs-mouse .vjs-big-play-button {
            background-color: red;
            opacity: .3;
            top: 0px;
            left: 0px;
            right: 0px;
            bottom: 0px;
            margin: auto;
          }
         </style>
      <body>
      
        <iframe src='//players.brightcove.net/1507807800001/30a9c9e0-295b-4102-a7af-a3f86bba91ab_default/index.html?videoId=4443311217001'
          allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>
      
      </body>
      </html>

Browse the page and you will see the iframe player is sized correctly. As mentioned earlier, the styles for the button will NOT be functioning.
Create a file named customize-qs.css and save it in an Internet accessible location.

Cut the styles for the button and paste them into the file and save it. Cut only the styles for the button, you cannot include the style tags. The file should contain only this content:

      .video-js.vjs-mouse .vjs-big-play-button {
        background-color: red;
        opacity: .3;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        margin: auto;
      }

Check to be sure your HTML page looks similar to the following:

      <!doctype html>
      <html>
      <head>
        <meta charset="utf-8">
        <title>iframe tester</title>
      
        <style>
          iframe {
            height: 344px;
            width: 610px;
          }
        </style>
      <body>
      
        <iframe src='//players.brightcove.net/1507807800001/30a9c9e0-295b-4102-a7af-a3f86bba91ab_default/index.html?videoId=4443311217001'
          allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>
      
      </body>
      </html>

In Studio, go into the Players module and edit the player you are using for this quick start.
Locate the PLUGINS section and click the Edit button.
Click the CSS entry and enter the path to your CSS file, as shown here:
Click Save to save your changes in the PLUGINS section.
The preview player at the top of the page will update to show the CSS styles applied to the button.
At the top of the page, click Publish to publish your player.
Return to your browser and refresh the page. Once the published changes are active, you will see your styles applied to the iframe player. It can be several minutes before the published changes are visible.

Explore styles

In this section a JSBin is used to allow you to explore styles and make more customizations to the big play button than what is shown above. Once you get a look you like, you can simply copy the CSS generated and use it with either player implementation as shown above.

One issue that may seem confusing is that the actual arrow in the button is not an image but part of a font family. That is why you control its size using font-size and use ems as units.

JS Bin on jsbin.com