Customizing Media Elements - HTML5 Media - page 40

NOTE
Any additional HTML contained in the media elements is fallback material accessible only to
browsers that don't support the HTML5 media elements.
You can size the media elements, position them, hide or show them, change their opacity, add
a background and border—many of the same CSS effects you can apply to div elements. You
can even apply some of the very new CSS3 transform and transition effects.
Adding a Fancy Border
The HTML5 media elements are functional, but not necessarily attractive. The elements are
a box that also has a display area if the element is a video . The media element controls are
plain but intuitive. The controls also differ between browsers, and between operating systems.
There is little you can do to control the appearance of the media element controls currently at
this time, but you can control the appearance of the media containers using standard CSS. For
instance, you can add a nice border, a box shadow, even add an overlay. You can also combine
CSS rules to create more complex effects.
Figure 12 shows one effect that combines the CSS border , border-radius , and linear-
gradient properties to create a gently pink, rounded corner, gradient background for the
video element, with a subtle box shadow to provide dimension.
To create this effect, add the CSS in Example 10 to the HTML5 page given in Example 9 at
the beginning of the chapter.