Responsive Web Design - Video

Using the width attribute

If the width property is set to 100%, the video player will automatically adjust its proportions according to the screen size:

Example

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

Try it Yourself »

Note that in the above example, the video player automatically adjusts its proportions according to the screen size, and can be larger than the original size. In most cases, we can use the max-width attribute instead.

Using the max-width attribute

If the max-width property is set to 100%, the video player will automatically adjust its proportions according to the screen, but will not exceed its original size:

Example

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

Try it Yourself »

Adding a video to a web page

We can add a video to a web page. In the following example, the video automatically adjusts according to the size of the div area and fills the entire div area:

Example

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

Try it Yourself »
other extensions