WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

Responsive Web Design - Videos


Using The width Property

If the width property is set to 100%, the video player will be responsive and scale up and down:

Example

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

Notice that in the precedent over, the video player can be scaled up to be bigger than its unique size. A superior arrangement, as a rule, will be to utilize the max-width property instead.


Using The maximum width Property

If the max-width property is set to 100%, the video player will downsize in the event that it needs to, however never scale up to be bigger than its unique size:

Example

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

Add a Video to the Example Web Page

We need to include a video in our model website page. The video will be resized to dependably take up all the accessible space:

Example

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