Responsive Web Design - Video

Use width property

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

Example

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

Try It Yourself

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.

Use max-width property

If the max-width When 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 Video to 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