Posts in current category

Responsive Web Design - Video


May 04, 2021 00:00 CSS


Table of contents


Responsive Web Design - Video


Use the width property

If the width property is set to 100%, the video player automatically adjusts the scale based on the screen size:

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

Try it out . . .

Note In the above example, the video player automatically adjusts the scale based on the screen size and can be larger than the original size. More often than not, we max-width property instead.


Use the max-width property

If max-width property is set to 100%, the video player automatically adjusts the scale to the screen, but not beyond its original size:

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

Try it out . . .

Add a video to the page

We can add videos to the web page. The following instance video automatically adjusts to the size of the div zone and fills the entire div area:

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

Try it out . . .