HTML and CSS Reference
Chapter . Customizing Media Elements
how we can customize the elements.
We'll try our hands at customizing the appearance of the controls with CSS, first, and then
HTMLMediaElement—the core element that provides API support for both media elements.
Lastly, I'll demonstrate how to use the browser debugger tools in order to determine exactly
what each browser currently supports with the HTML5 media element.
The HTML5 web page we'll use as the base for all of the examples is given in Example 9 . No
fallback content is shown, in order to keep the examples as clean as possible.
<meta charset="utf-8" />
<video controls width="480" height="270" poster="bigbuckposter.png">
<source src="videofile.mp4" type="video/mp4" />
<source src="videofile.webm" type="video/webm" />
The examples in this chapter focus on the video element. However, many of the effects de-
scribed in the chapter can be applied, equally, to both audio and video .
Both HTML5 media elements are block elements. Think of them as div elements…with
perks. However you can style a div element, you can style an audio or video element. The
only difference between them, from a styling perspective, is the div element can contain oth-
er HTML elements, while the media elements can only contain the source and target ele-