Styling the DIV Container with External CSS in Player V3

Style the DIV Container with an external CSS.

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.

Example

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.
<!DOCTYPE HTML>
<html>
     
<head>
         
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
                 
<script src='http://player.ooyala.com/v3/123fake1ZDUzZGVlYmMxNzA3Y2MzNjBk?platform=priority-html5'>
 </script>

</head>

<body>
   <h2>PLAYER V3 SHOWS BELOW THIS LINE</h2>
   <div id='playerwrapper'> </div>
          
<script>    
    OO.ready(function() {
       var embedCode = "45cmZqNDrKn7TvtpfGa9k9fQSeyK4VaI";
       var player = OO.Player.create('playerwrapper',embedCode, {
                    width: '800px',
                    height: '300px' ,
                    css: '/myvideo.css'
       });
    });    
 </script>                                                                               
</body>
     
</html>

Was this article helpful?