HTML and CSS Reference
Figure 5-4. When selecting which size video you want to embed, YouTube offers static illustrations
that lack context
In this Sample Design, we use canvas (see Chapter 9 ) to create a better and more
contextual preview of what video may look like at different sizes (see Figure 5-5 ).
Add <video> and <canvas>
To start, reuse the markup used in this chapter for video , and add a button to trigger
the drawing, as well as two canvas elements: one for a medium preview and one for a
To each element, assign a unique id :
<video id="origVideo" width="640" height="360">
<source src="video.mp4" type="video/mp4" />
<source src="video.ogv" type="video/ogg" />
Your device does not support HTML5 video.
<button title="Generate Preview" onclick="generatePreview();">Generate
<canvas id="previewMed" ></canvas>
<canvas id="previewSm" ></canvas>