Linking to the CSS in Player V3 (Deprecated)

You can customize your Player V3 skin or theme using a Cascading Style Sheet (CSS) file or inline CSS elements.

Important: Ooyala Player V3 is deprecated and is scheduled to be disabled on 2018-01-31. After that date, Player V3 will no longer play your video or audio content. Customers still using Player V3 need to migrate to Player V4 (see Migrating from Player V3 and Player Migration FAQ).
In the following example, the HTML page has a link to the myvideo.css file, which contains some CSS styles applied to the div container. Normally, you would use the HTML link element as shown below:
DON’T DO THIS:
<link href="myvideo.css" rel="stylesheet" type="text/css" />

However for the player, you need to place the reference to the .css file within the creation of the player instance:

DO THIS:
var embedCode = "45cmZqNDrKn7TvtpfGa9k9fQSeyK4VaI";

var player = OO.Player.create('playerwrapper',embedCode, {
          width: '800px',
          height: '300px' ,
          css:'/myvideo.css'});
    

Specify the css in this way ensures that the player automatically loads your specified style and makes sure its is applied correctly.

Was this article helpful?