Latest web development tutorials

Responsive Web Design - Video (Video)

Use the width attribute

If the width attribute is set to 100%, the video player will be automatically adjusted in proportion to the screen size:

Examples

video {
width: 100%;
height: auto;
}

try it"

Note that in the above example, the video player is automatically adjusted in proportion to the size of the screen and can be larger than the original size. More often we can use the max-width property instead.

Using max-width property

If the max-width property is set to 100%, the video player will be automatically adjusted in proportion to the screen, but no more than its original size:

Examples

video {
max-width: 100%;
height: auto;
}

try it"

Adding video page

We can add a video in a web page. The following examples and video is automatically adjusted according to the region occupies the entire div div area size:

Examples

video {
width: 100%;
height: auto;
}

try it"