HTML and CSS Reference
• TinyOgg: http://tinyogg.com/
• OggConvert: http://oggconvert.tristanb.net/
5.3 Setting Video Dimensions
You want to specify the width and height of your video player.
Add the width and height attributes, and their corresponding values, to video :
<video controls 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.
Browsers render the video player according to the dimensions you assign, not the
resolution of your actual video. Using different dimensions might lead to a loss in
quality by expanding a video beyond its native resolution; the same goes for scaling
down a large video simply to fit into a small space.
So, when possible, use the same dimension values for the video element as for the video
file itself, and don't resize your video with width and height .
Technically speaking, the width and height of a video element do not need to be set as
browsers default to inheriting the dimensions of the video file itself. The drawback to
this approach is that if the dimensions are not set, browsers won't know what space to
reserve for your video and may have to redraw your page after downloading the video
The width and height values need to be set in CSS pixels as integers and not as
percentages or other values. Adding dimension values helps browsers more efficiently
render your pages, which usually results in a better user experience.
Since you probably don't want to use width and height to resize your video to something
other than its native dimensions, you can instead use encoding software to specify the
Mark Pilgrim's “Dive Into HTML5” (see http://diveintohtml5.info/video.html ), which
provides very detailed instructions about using many of the encoding tools available,