HTML and CSS Reference
In-Depth Information
Figure 6-3. Controlling video width and height in the embed
Dynamically scaling a video
Now it is time for a more elaborate (and we think more effective) example of scaling a
video. By changing the
width
and
height
attributes of the
<video>
tag, we can scale the
video on the fly. While there may be a few practical reasons you would do this in a real-
world situation, it is also an effective way to demonstrate some of the power of the
HTML5
<video>
tag.
First, we need to add an HTML5
range
control to the page:
<form>
Video Size: <input type="range" id="videoSize"
min="80"
max="1280"
step="1"
value="320"/>
</form>
