Branding (iOS v3)

The nine complimentary skins offered in version 2.x have been deprecated in 3.x, but customizing JWP is easy with JWP 8's CSS-based skinning model.

To customize the player's skin you must set a JWSkinStyling instance to your config.

JWSkinStyling *skinStyling = [JWSkinStyling new];
config.skin = skinStyling;

let skinStyling = JWSkinStyling()
config.skin = skinStyling

📘
Our iOS SDK utilizes UIKit, but can be used within SwiftUI. For examples of how to achieve this, follow Apple's SwiftUI tutorial on Interfacing with UIKit

Color customization

Using JWSkinStyling you can edit the color of the elements contained in the controlbar, timeslider, menus, and tooltips.

JWControlbarStyling *controlbarStyling = [JWControlbarStyling new];
controlbarStyling.text = [UIColor blueColor];
controlbarStyling.icons = [UIColor redColor];
skinStyling.controlbar = controlbarStyling;

let controlbarStyling = JWControlbarStyling()
controlbarStyling.text = UIColor.blue
controlbarStyling.icons = UIColor.red
skinStyling.controlbar = controlbarStyling

Alternatively, you can set a value to the active, inactive, and background properties of the JWSkinStyling to customize the active, inactive and background colors of all the elements in the skin excluding the timeslider's rail.

skinStyling.active = [UIColor yellowColor];
skinStyling.inactive = [UIColor blackColor];
skinStyling.background = [UIColor blueColor];

skinStyling.active = UIColor.yellow
skinStyling.inactive = UIColor.black
skinStyling.background = UIColor.blue

📘
Customization set to specific UI elements will take precedence over the general customization.

Skinning with a CSS URL

It is possible to customize the player by way of a CSS file, allowing you to support numerous use cases beyond coloring, such as hiding the fullscreen (or any other) button, or replacing an icon image.

For more detail on composing a CSS Skinning file, see our web player documentation, especially "Creating your own CSS" and "Player CSS skin reference."

Once you have a CSS file you wish to use with the SDK, add it to the skinning config object via its URL:

JWSkinStyling *skinStyling = [JWSkinStyling new];
skinStyling.url = @"http://yoursite.com/yourstyles/myskinfile.css";
skinStyling.name = @"myskin";

let skinStyling = JWSkinStyling()
skinStyling.url = "http://yoursite.com/yourstyles/myskinfile.css"
skinStyling.name = "myskin"

or for local files

JWSkinStyling *skinStyling = [JWSkinStyling new];
skinStyling.url = [NSString stringWithFormat:@"file://%@", [[NSBundle mainBundle] pathForResource:@"myskinfile" ofType:@"css"]];
skinStyling.name = @"myskin";

let skinStyling = JWSkinStyling()
if let skinUrl = Bundle.main.path(forResource: "myskinfile", ofType: "css") {
    skinStyling.url = skinUrl
    skinStyling.name = "myskin"
}