HTML and CSS Reference
In-Depth Information
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:
<section id=”ad”>
<video></video>
<div id=”video-frame”></div>
<div id=”frame1”></div>
<div id=”frame2”></div>
</section>
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.
NOTE:
JavaScript has been used to mute video: I fire the JavaScript on the
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.
