HTML and CSS Reference
You then move on to the video block, as shown in Listing 4-17. In both
wireframes the videos are displayed in a grid format, but they are flexible in that
a row may contain two or four videos, which makes using a table inflexible. For
this, you would opt to use a regular list and format it using CSS, depending on
the device's orientation.
Listing 4-17. Video Block
<section class="block" id="block-video">
<ul class="list grid">
<video poster="path/to/posterframe.jpg" title="Clip Title">
<source type="video/webm" src="path/to/video.webm" />
<p>Clip name - 00:38</p>
The soundtrack block is quite simple, as it's similar in both orientations, and on
both tablet and mobile. This is shown in Listing 4-18.
Listing 4-18. The Soundtrack Block
<section class="block" id="block-soundtrack">