Native Video - HTML5

HTML and CSS Reference

In-Depth Information

• TinyOgg: http://tinyogg.com/

• OggConvert: http://oggconvert.tristanb.net/

5.3 Setting Video Dimensions

Problem

You want to specify the width and height of your video player.

Solution

Add the width and height attributes, and their corresponding values, to video :

Your device does not support HTML5 video.

</video>

Discussion

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

data.

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

resolution.