WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

Responsive Web Design - Videos


Using The width Property

If the width property is set to 100%, the video player automatically scales according to the screen size:

Example

video {
    width: 100%;
    height: auto;
}
Try it yourself »

Note that in the above example, the video player automatically scales according to the screen size and can be larger than the original size. In more cases we can use the max-width property instead./p>


Using The maximum width Property

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

Example

video {
    max-width: 100%;
    height: auto;
}
Try it yourself »

Add a Video to the Example Web Page

We can add videos to web pages. The following example video automatically resizes and fills the entire div area based on the size of the div area:

Example

video {
    width: 100%;
    height: auto;
}
Try it yourself »