Quick Start: Player Customization

Product(s)
Video Cloud
Brightcove Player
Role(s)
Player Developer
Task(s)
Get Started with Player Development
Topic(s)
Styling

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.

  1. In Video Cloud Studio, open the Media module and select a video to publish.
  2. Choose the player with which you wish to play the video.
  3. Copy the Advanced publishing code.
  4. Using your HTML editor, create a new HTML page.
  5. Paste the publishing code into the body of your HTML page.
  6. Browse the newly created page. By default, the player will be sized with default dimensions of 300 x 150 pixels.
  7. 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.
  8. Check the screenshot below to see the class highlighted in red. Highlighted in green is the video tag, which is Brightcove Player.
    player selectors
    player div with object
  9. 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>
  10. 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.

  1. Browse your HTML page.
  2. Right click on the play button that overlays the player and select Inspect Element.
  3. Note that the <div> tag that is highlighted represents the play button and has a class of vjs-big-play-button.
    big play button div
  4. Alter your styles to include CSS that changes the color and opacity of the play button.
    <style>
      .video-js {
        height: 344px;
        width: 610px;
      }
      .vjs-big-play-button {
        background-color: red;
        opacity: .3;
      }
    </style>
  5. Browse your page and you will see not all the styles have been used. The button is not red.
    button not red
  6. 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.
    styles background 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 doc, and numerous references in any search.

  7. Note that the <div> tag surrounds the player has numerous classes associated with it.
    multiple classes
  8. 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).
    <style>
      .video-js {
        height: 344px;
        width: 610px;
      }
      .video-js.vjs-mouse .vjs-big-play-button {
        background-color: #ff0000;
        opacity: .3;
      }
    </style>  
  9. Browse your page and see that all styles are now applied.
    styles background working
  10. 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.
    styles background 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;
    }
   </style>
</head>
<body>

  <video-js
    data-video-id="4443311217001"
    data-account="1507807800001"
    data-player="30a9c9e0-295b-4102-a7af-a3f86bba91ab"
    data-embed="default"
    class="video-js" controls></video-js>
  <script src="https://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-js> tag.

Note: Depending upon your CSS experience, you may be wondering why the code above did not assign an id attribute to the <video-js> 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)

Note: The following steps assume you will be working from the HTML you completed in the previous steps and shown in the code snippet above. If you wish to keep that as a working example, simply copy the code into another file and start the following steps in the new file.

  1. In Studio, publish a video and copy the code for an iframe implementation of the player.
  2. In your HTML page, replace the in-page embed code with the iframe code.
  3. 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;
    }
  4. 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;
        }
       </style>
    <body>
    
      <iframe src='https://players.brightcove.net/1507807800001/30a9c9e0-295b-4102-a7af-a3f86bba91ab_default/index.html?videoId=4443311217001'
        allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>
    
    </body>
    </html>
  5. 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.
  6. Create a file named customize-qs.css and save it in an Internet accessible location.
  7. 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;
    }
  8. 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='https://players.brightcove.net/1507807800001/30a9c9e0-295b-4102-a7af-a3f86bba91ab_default/index.html?videoId=4443311217001'
        allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>
    
    </body>
    </html>
  9. In Studio, go into the Players module and edit the player you are using for this quick start.
  10. Click Plugins in the left navigation menu.
  11. Click Add a File, then the CSS radio button, and enter your path:
    studio enter css
  12. Click Save to save your changes.

    The preview player at the top of the page will update to show the CSS styles applied to the button.

  13. To publish the player, click Publish & Embed > Publish Changes.
  14. To close the open dialog, click Close.
  15. 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.

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