CSS Skin Reference

This article acts as a reference for styling all interface components of JW Player 8. This skinning model uses CSS, and all controls are overlaid on top of the player with HTML. JW8 uses inline SVGs for all icons.

When styling these elements, there are a few conventions to keep in mind. All internal classes are prefixed with jw- in order to protect the player from external stylesheets. The original DOM element that we initialize is called the Main Div.

A JW Player skin CSS file contains classes that are grouped into functional elements. This reference provides an elaborate overview the classes used. For additional information, check out a reference css file.

Main Div

The main div will be given a class jwplayer. It is strongly advised to not add any additional inline styling on this div besides what is included in your skin css file.

Player States

The state of the player is reflected in the DOM by a class on the main div. It will always contain one of the following:

Flags

Sometimes the player needs to signify certain modes of the playback. These flags will be present on the main div and can be:

Colors

We advise only using .jw-background-color for color and not other CSS properties. The player will add this class to the following elements:

• .jw-display-icon-container
• .jw-controlbar

Poster Images

These define how the poster image will be stretched to fill the space given. Internally this state is used to stretch the player using JS.

• .jw-stretch-none
• .jw-stretch-uniform
• .jw-stretch-fill
• .jw-stretch-exactfit

Controls

All player controls are within the .jw-controls class. When JW Player is set to controls: false, this entire class has a visibility of hidden. To not include a specific item in your skin, you will need to override the style with a visibility or display of none.

Display

The display component contains the main element container for the (re)play, buffer and error icons in the middle of the screen, as well as the rewind and next buttons that appear on pause for small breakpoints. To add styles to these containers based on states you will need to add the state classes in your stylesheet.

The display component has a container and an additional inner wrapper. Both are required to contain the display icon containers below.

At smaller breakpoints, up to three icons can be displayed in the middle of the screen at one time. The three slots for icons have a container, an inner div, and an SVG. Each element requires specific classes, as well as a class referencing the name of the icon:

Controlbar

The controlbar component contains all elements for the video controls at the bottom of the player. All elements are contained within the .jw-controlbar parent class and broken out into two groups, .jw-slider-time and .jw-button-container.

Slider Time

The center group contains the elements that make up the player's timeslider.

Button Container

The button container contains playback controls, elapsed and duration time, and the settings menu. The additional classes .jw-icon .jw-icon-inline .jw-button-color are all required within the button container when it is built. Within the SVG element, .jw-svg-icon is required.

Break Points

Breakpoint classes are added to the player element based on the width of the player, not the device or browser. Because JW Player instances are embedded via an iframe, the usual @media query will not work for defining CSS declarations to make elements responsive. Breakpoints are global classes that can be used to make responsive CSS declarations for any customizable player element.

Examples

Make font size smaller only when player width is under 420px wide:

.jw-breakpoint-0 .jw-related-item-description {
font-size: 11px;
}

For medium-sized player widths, make the font size bigger:

.jw-breakpoint-3 .jw-related-item-description,
.jw-breakpoint-4 .jw-related-item-description {
  font-size: 16px;
}

Settings Menu and Submenus

The following icons are nested within .jw-settings-topbar, a child of .jw-settings-menu. Icons appear only if the submenu is enabled or avaialble The additional classes .jw-icon .jw-icon-inline .jw-button-color are all required within the button container. Within the SVG element, .jw-svg-icon is required.

Float on scroll ^8.8.0+

Tooltips and Overlays

JW Player will automatically populate overlay divs on mouseover/touch of certain interface elements. These include the timeslider thumbnail preview, volume slider and on-hover tooltips for controlbar icons.

Title and Preview Image

The title and description configuration options are displayed in their own classes overlaid on the player.

Discovery Overlay

The discovery overlay displays recommended content related to the current media file. The overlay uses breakpoints to select the proper format and amount of items to display.

Customization

Selectors

Buttons

The following icons are nested within .jw-related. The additional class .jw-button-color is required within the button container. Within the SVG element, .jw-svg-icon is required.

Next Up Card

The next up card displays prior to a video's completion, showing information about the following media item.

Customization

Selectors