HTML and CSS Reference
FIGURE 4.42 The rocking
heavy metal ad.
The background of the entire advertisement is a short looping video clip that
shows off the energy of the band. Over the top of this the most important informa-
tion is displayed, and on hover/focus another pane of information is shown contain-
ing more info. The final product as it stands at this point is shown in Figure 4.42 .
The basic markup structure is as follows:
One section contains the entire ad and includes a <video> element to render
the rocking Dead Hamster footage, a <div> to apply an effect over the top of the
video (more on this shortly), and then a couple more <div> s to contain the two
panes of information.
onloadedmetadata event to make sure mute is fired before the content starts
playing; otherwise, a clip of sound might be heard before the mute kicks in.