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"
}
Updated 8 months ago