Responsive Web Design - Video

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:

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:

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: