Customizing an HTML5 Player V3 With CSS

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

While you can put CSS styles within your HTML file, it is easier and more modular to use a separate file and link to it. To customize your Player UI, you will need the following items which can be in one file (myvideopage.html) or more commonly in multiple files:
  • The HTML or web page (such as myvideopage.html) or pages.

  • The CSS file containing the web page and player styles (such as myvideo.css).

Note: The default player has an associated set of styles that you can inspect for examples of the styling used for the default player.

HTML5 Player V3 UI Elements

You can use CSS to change the color, border, size and other aspects of various player controls. The following table lists some typical player controls some of which are automatically provided in the Ooyala default player. Note that the terms used for the Player controls are unconstrained and up to the developer to create. You can however use a web development tool such as Firebug or its equivalent to inspect the DOM tree of the Ooyala demo and see how the player controls were named and styled.
Player Control Use this Control to:
Play Start playing a video.
Pause Halt the video mid-stream. When selected, the video will resume playing at the point it was paused.
Stop Stop the video.
Replay Once the video is complete, select to restart at the beginning.
Autoplay Automatically replay the video when it completes.
Fullscreen Expand the video to occupy the full dimension of the device screen.
Scrubber bar Advance or retract the scrubber bar to seek to a particular position in the video.
Share Enable or disable sharing options such as Digg, Stumble Upon, Facebook, Twitter, Email.
Embed Display the embed code and enable copying of the embed code.
Info Display informational text such as the title or description of the video.
As long as your target browser supports it, you can style the div id container using ordinary CSS properties, such as:
  • height - set the height of an element such as the div container or an image overlay.

  • width - set the width of an element.

  • border - create a border around an element such as the div container or player.

  • float -  used to position a CSS element to the left or right, allowing other elements to wrap around it.

There are many other CSS elements that you can apply. A full HTML5 reference is available at the W3C standards website and there are many useful references available via Internet search. You can also use CSS3 properties to add more complex styling. These properties may require additional prefixes to work in particular browsers. Firefox 4 requires the prefix -moz- , while Chrome and Safari requires the prefix -webkit- for many of these CSS3 styles. Some of these styles are:
  • opacity - you can use this to easily create a transparent image or to make a CSS element transparent.

  • mask - combines opacity values and clipping (using shapes, text or paths) to define parts of the mask.

  • gradients - provide a smooth transition from one color to another. You can apply several color transitions to the same element.

  • transforms - enables you to apply 2D or 3D effect to an element, enabling you to rotate, scale, move, and skew elements.

  • transitions - enables you to add an effect when changing from one style to another, without using Flash animations or JavaScript code.

  • animations - enable an element to gradually shift from one style to another. You can use it to replace animated images, JavaScript code or Flash animation with CSS3 animation elements.

Again, support for these CSS3 styles is gated on what your target browser supports. You need to check out the level of support for each CSS style for your browser.

Was this article helpful?