Styling the DIV Container with External CSS in Player V3 (Deprecated)

Style the DIV Container with an external CSS.

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 myvideo.html example, the player is wrapped in a div container with the div id of playerwrapper. We use an external .css file to hold all of the css styles including those for the playerwrapper DIV container. Note that the css file reference is located after we have instantiated a player instance.


The following example shows how to style the video and div container. In this example, we are applying styles to the HTML5 player using CSS. To ensure that we load the HTML5 player, we have specified "priority-html5" with the embed code. Notice that we defined the DIV id as 'playerwrapper' and then reference it when we create the player with the OO.Player.create function. In the hash of the OO.Player.create function we include the name of the CSS file that we want to associate with the player.

Note: Remember to replace the embed code (123fake1ZDUzZGVlYmMxNzA3Y2MzNjBk) in this example with your own embed code. Do not just cut and past the placeholder version used in this example.
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<script src=''>


   <div id='playerwrapper'> </div>
    OO.ready(function() {
       var embedCode = "45cmZqNDrKn7TvtpfGa9k9fQSeyK4VaI";
       var player = OO.Player.create('playerwrapper',embedCode, {
                    width: '800px',
                    height: '300px' ,
                    css: '/myvideo.css'

Was this article helpful?