HTML and CSS Reference
In-Depth Information
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">
<h3>Video Clips</h3>
<div class="content">
<ul class="list grid">
<li>
<video poster="path/to/posterframe.jpg" title="Clip Title">
<source type="video/webm" src="path/to/video.webm" />
</video>
<p>Clip name - 00:38</p>
</li>
</ul>
</div>
</section>
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">
<h3>Soundtrack</h3>
<div class="content">
<table class="alternating">
<thead>
<tr>
<th> </th>
<th>Title</th>
<th>Artist</th>
</tr>
</thead>
