HTML and CSS Reference
In-Depth Information
<li>Lead Artist: Enrico Valenza (Italy)</li>
<li>Animation: Nathan Vegdahl (USA), William Reynish
(Denmark)</li>
<li>Technical directors: Brecht van Lommel (Belgium)
en Campbell Barton (Australia)</li>
<li>Music by: Jan Morgenstern (Germany)</li>
<li>Produced by: Ton Roosendaal (Netherlands)</li>
</ul>
</div>
</div>
</body>
The overlay isn't completely opaque when the video element receives focus—we can still see
the video through the text, though the text is very readable. In addition, the opacity of the
overlay is incremented gradually using a CSS transition, which makes a nice effect. The over-
lay application works in all of our target browsers other than IE not supporting the transition
effect.
The overlay is a technique that works without script, and works well…except for one problem.
If you attempt to stop the video or pause it during play, you can't. Why? Because the overlay
also hides the video controls. In order to use something like an overlay with a video element,
what's needed is a way of providing a set of media controls that exist outside of the actual
media element. For this functionality, though, we'll need JavaScript.
NOTE
canvas
element.
