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 thediv
tag has a class ofvideo-js
. Thediv
that contains the player will always have a class ofvideo-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.
- 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 thehead
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.
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"
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.
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 usingiframe
as the element. Leavewidth
andheight
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 allow='encrypted-media'></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 allow='encrypted-media'></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.
- 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.