HTML and CSS Reference
transition: all 1s ease-in-out;
Since the transition property was added to the video element's stylesheet setting, and applies
to any CSS property, any change to the video element CSS has a transition effect. This in-
cludes the transform, but also includes the change to the box shadow (from subtle gray to
stronger, brighter pink). The transition works in all our target browsers except for IE—either
IE9 or IE10.
The specification for the CSS 2D Transform can be found at http://www.w3.org/TR/css3-2d-trans-
Adding an Overlay
If CSS3 transforms and transitions are new kids that take some time to wrap our minds around,
a simple overlay is an old web development friend. An overlay is just one element layered
over the other—typically a div element layered over another element.
Developers who create custom controls for HTML media elements use overlays, but another
use is to provide information about the video, such as producer, director, and so on.
Example 13 demonstrates using an overlay to provide information about the Big Buck Bunny
video when the video receives mouse or keyboard focus.
In the example, both the div element and the video share the same container. The container's
CSS position property is set to relative , so that when the div element's position is set
absolutely to 0,0 , it stays within the container. The div element is sized the same as the media
The div element contains information about the movie. It's “hidden” by default by setting
the element's opacity to 0, making the element transparent. When a video receives focus, the
overlay's opacity goes to 0.8, making it 80% opaque and therefore visible. When the video
loses the focus, the overlay's opacity is again returned to 0. The video is set to autoplay when
the page is loaded.
Example13.A simple CSS-based overlay with the video element
<meta charset="utf-8" />