HTML and CSS Reference
In-Depth Information
Video-Only Attributes and Video Resolutions
There are a couple of attributes that are only specific to the
video
element.
poster
The
poster
attribute is a way of providing a static image to display in the video element
until the web page reader plays the video.
width
,,
height
width
height
The
width
and
height
attributes set the width and height of the
video
element. The con-
trol will resize to fit the video when it's played, but if the video is larger than the control,
it pushes content out of the way and can be quite distracting to web page readers. If the
video is smaller than the control, it's centered within the space.
The actual width and height of a video are directly related to the resolution of the video. If
you have a Standard Definition (SD) video, you have a video that's 480 pixels in height (480
lines). If you have an HD video, you have a video that's 720 lines (pixels) tall, or taller. You
can find the exact frame dimensions using a tool such as Handbrake (covered later in the
chapter).
The
poster
and the
width
and
height
attributes imply that you know the size of the video.
You'll want to provide the same size poster image as the video, and you'll want to size the
control the same as a frame in the video. Providing both attributes ensures that your video
presentation is smooth and polished, rather than other page content abruptly being pushed
down as the
video
element automatically expands.
width
,
height
, and
poster
attributes set.
Example1-7.Video with the width and height set, as well as a poster image to display
<!DOCTYPE html>
<head>
<title>Birdcage</title>
<meta charset="utf-8" />
</head>
<body>
<video controls width="640" height="480" poster="birdcageposter.jpg">
<source src="birdcage.mp4" type="video/mp4" />
<source src="birdcage.webm" type="video/webm" />
</video>
</body>
