HTML and CSS Reference
Video-Only Attributes and Video Resolutions
There are a couple of attributes that are only specific to the video element.
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
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
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.
Example 1-7 shows a web page with a video element and two source elements that has the
width , height , and poster attributes set.
Example1-7.Video with the width and height set, as well as a poster image to display
<meta charset="utf-8" />
<video controls width="640" height="480" poster="birdcageposter.jpg">
<source src="birdcage.mp4" type="video/mp4" />
<source src="birdcage.webm" type="video/webm" />