Responsive Web Design - Videos

Using width Property

If width If the property is set to 100%, the video player will respond and resize:

Example

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

Try It Yourself

Please note that in the above example, the video player can enlarge to a size larger than its original size. In many cases, a better solution is to use the max-width property.

Using max-width Property

If max-width If the property is set to 100%, the video player will shrink proportionally but will never enlarge to a size larger than its original size:

Example

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

Try It Yourself

Add a Video to the Example Web Page

We hope to add a video to the example web page. The video will be resized to always occupy all available space:

Example

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

Try It Yourself