Responsive Web Design - Videos

Responsive Video with CSS

A responsive video shrinks and grows to fit the screen, so it looks right on a phone and on a big screen.

There are three properties we can use:

• width: 100% - makes the video as wide as its container, and will scale up and down
• max-width: 100% - makes the video scale down if it has to, but never scale up to be larger than its real size
• height: auto - keeps the height in proportion, so the video never looks stretched or squashed

Using The width Property

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

Notice that in the example above, the video player can be scaled up to be larger than its original size. A better solution, in many cases, will be to use the max-width property instead.

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:

Now the video shrinks on small screens but never grows larger than its real size!

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: