In this article, we’ll explore the basics behind CSS and why JW Player chose CSS for its new skinning model. In addition, we’ll also explore some interesting modifications that can be done to the player’s skins.
In the early days of the web, HTML pages were cold, sad places. Text was unformatted, image slicing was commonplace, and tables were all the rage. For a great example of old school web design, look no further than Space Jam. While we can still appreciate Michael Jordan’s stellar comedic performance to this day, the Space Jam website has unfortunately not aged as gracefully. Designers from the early web needed a better way to make sites beautiful and, because of this notion, Cascading Style Sheets (CSS) was developed as a W3C standard for web site styling.
So why now?
Between the releases of JW6 and JW7, browsers have become overwhelmingly more ubiquitous and modernized — CSS features that were missing before are now available. At the same time, older browser usage has naturally declined. Given this, and the continuing upward trajectory of newer browsers, we believe that it is now the time for JW Player to universally utilize CSS.
Now, we are in the future, and CSS is the most popular method of styling content on the web. Because of this, we’ve chosen to base JW7’s new skinning model on it.
What are the benefits of CSS skinning?
The older style of skin rendering with JW Player 5 and 6 was based on the control bar being sliced up into tiny bitmaps being reassembled based on an XML reference document. This was a requirement, as it allowed controls to be rendered accurately across both Flash and HTML5.
With JW7 and our updated provider model, CSS skins can be rendered on top of a video, regardless if it’s rendering in Flash or HTML5. More information about why we’ve chosen CSS is found below:
Dynamic – Styles can be applied instantly. Quickly modifying skins without having to reload the player is a simple process, and can be used for a variety of purposes. For example, changing the color of your skins depending on content, play state, or website behavior is now fully possible.
Responsive – Thanks to CSS, all skins are vector-based, retina-ready, and infinitely scalable. Even at maximum zoom on ultra-high DPI screens, controls and interface remain crisp.
You can see the difference:
CSS’ responsive, flexible controls allow for JW7 to look good on devices of all shapes, sizes, and types.
Lightweight – JW6’s skins required the loading of separate bitmap files based on an XML manifest. With JW7 and CSS, all controls are being rendered by the browser itself, so we’ve been able to decrease both code and file size. All of this adds up to a speedier experience for your and your viewers.
Open – Customizing and perfecting your player’s appearance has never been easier or more straightforward. If you are a web designer, you already know CSS — no need to learn another skinning model
Some Cool Examples
Now that you’ve read about the power of CSS, it’s time for some examples. Changing aspects of JW Player can be done by knowing what section you’d like to change, and then referring to our DOM reference guide.
Removing Buttons
Say, for example, that I’d like to remove an icon in our control bar. First, we’ll need to check our DOM reference to see the name of the specific button that we’d like to remove. For this example, we’ll go with the fullscreen button, which is known as .jw-icon-fullscreen.
To remove this button, we’ll be setting its display property to none. Simply place the following between some
tags:
.jw-icon-fullscreen {
display: none;
}
The result can be seen below:
Note that the use of display: none can be used for any buttons or control bar elements that you wish to hide. JW Player’s skinning model is intelligent enough to move icons over based on any hidden elements.
Styling the Play Button
A frequent ask about our new skin model is about styling certain elements. In our example below, we’ll walk through a few CSS styles that can affect the size and appearance of the play button.
Our default JW7 skin places the play icon inside of a black circle. While this looks great in most cases, it may get lost in certain darker poster images:
We’ll start by first adding a brighter, more pronounced border. Again, by looking at our DOM structure, we can target our JW7 skin’s display icon container (.jw-skin-seven .jw-display-icon-container) to add a white 2 pixel border:
.jw-skin-seven .jw-display-icon-container {
border-width: 2px;
border-color: #fff;
}
Great, this is a bit easier to see now! However, a more rectangular button might look nice here. I’m now going to override our 50% border radius (Which turns this icon into a circle) with a 10% radius. That should give us some nice rounded corners. On top of that, I’ll also increase the width of the button to 110 pixels, making this button into an elongated rectangle:
.jw-skin-seven .jw-display-icon-container {
width: 110px;
border-radius: 10%;
border-width: 2px;
border-color: #fff;
}
Ah yes, this button really adds to the dramatic flair of Sintel. Finally, I’m going to add a few finishing touches. I’ll decrease the default size of the play icon (With .jw-display-icon-container .jw-icon-display) from 2em to 1.5em, adjust background opacity, and make a fancy box-shadow glow when things are hovered over (With the .jwplayer:hover state). Each of these changes is only 1 line of CSS. The completed code is found below:
.jw-skin-seven .jw-display-icon-container {
opacity: 0.7;
width: 110px;
border-radius: 10%;
border-width: 2px;
border-color: #fff;
}
.jw-display-icon-container .jw-icon-display {
font-size: 1.5em;
}
.jwplayer:hover .jw-display-icon-container {
box-shadow: 0px 0px 15px #ffffff;
opacity: 1;
}
And the final result of our CSS is shown here:
With only 9 lines of CSS, we’ve been able to fully change our play button’s appearance! There are many other things that can be done here as well. For instance, custom button positioning and animations. Perhaps we’ll save that for another article…
What’s Next?
We’re really excited about what the future holds for CSS and our player. With this framework in place, along with our robust API, we believe our community will be able to exercise their creativity to the fullest. If you happen to have an awesome implementation that you’d like us to share, let us know! We’ll be showing off some exciting user-made custom JW7 designs in the future.