WorkflowsKaltura Player External Skin Overrides

1
Override the Standalone HTML Page with the Player and Custom CSS File

Override the Standalone HTML Page with the Player and Custom CSS File
Learn More

media.get

To begin:

  1. Create a standalone HTML page, and embed a Player using the DynamicEmbed method.
  2. Create a separate CSS file where you will add the custom CSS directives to override the existing Player look-and-feel according to your preferences.

To know which elements and classes to override, use your browser "developer tools" and inspect the various elements you wish to change.
You can also review the full core skin CSS file kdark skin (the default player skin) and the ott skin (the OTT-TV skin) to learn more about the available elements and classes.

When creating your skin, verify the following:

  • To ensure that your class directives override the core player skin directives, add the !important rule to your CSS directives.
  • You can also reference external assets in your CSS file, such as images and fonts. You may use either relative or full paths to these assets.

To load your custom CSS, add the IframeCustomPluginCss1 flashvar to your Player embed code (or add it through the Player Studio UIVars section).
For example: flashvars: {IframeCustomPluginCss1: pathToMy/externalCustomCSSFile.css}

You can define more than one custom CSS files accordingly: IframeCustomPluginCss1, IframeCustomPluginCss2, IframeCustomPluginCss3, etc.

The example below assumes that you have created your custom CSS file under the externalResources folder and using the IframeCustomPluginCss1.css filename.

Parameters

Set the values below to try this step
Back
Next

Sample Code

JavaScript

kWidget.embed({
	"targetId": "kaltura_player",
	"wid": "_",
	"uiconf_id": ,
	"flashvars": {
	    //externalResources/IframeCustomPluginCss1.css is the custom CSS file you've created
		"IframeCustomPluginCss1" : "externalResources/IframeCustomPluginCss1.css"
	},
	"entry_id": ""
});
Copy to clipboard