HTML and CSS Reference
In-Depth Information
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.
NOTE
The specification for the CSS 2D Transform can be found at
http://www.w3.org/TR/css3-2d-trans-
forms/
.
The one for CSS Transitions is at
http://www.w3.org/TR/css3-transitions/
.
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
element.
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
<!DOCTYPE html>
<head>
<title>video</title>
<meta charset="utf-8" />
<style>