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%;
  height: auto;
}

​

​

Using The max-width Property

​

If the max-width property is set to 100%, the video player will scale down if it has to, but never scale up to be larger than its original size:

 

EXAMPLE:

 

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

​

​

Add a Video to the Example Web Page

​

We want to add a video in our example web page. The video will be resized to always take up all the available space:

​

EXAMPLE:

​

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

​