Responsive Web Design - Video
Using the width Property
If the width property is set to 100%, the video player will automatically adjust its size according to the screen size:
Example
video {
width: 100%; height: auto;
}
Note that in the above example, the video player adjusts its size automatically according to the screen size and can be larger than its original dimensions. More often, we can use the max-width property instead.
Using the max-width Property
If the max-width property is set to 100%, the video player will adjust its size according to the screen but will not exceed its original size:
Example
video {
max-width: 100%; height: auto;
}
Adding Video to a Web Page
We can add video to a web page. The following example adjusts the video to fit the size of the div area and fills the entire div area:
Example
video {
width: 100%; height: auto;
}