---
title: Responsive Web Design – Videos
description: "> ## 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; }` Notice that in the example…"
url: "https://apprentice.mn/docs/responsive-web-design-videos/"
updated: "2021-05-13"
category: CSS
---

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

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:

### 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;
}`        [https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fresponsive-web-design-videos%2F&linkname=Responsive%20Web%20Design%20%E2%80%93%20Videos](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fresponsive-web-design-videos%2F&linkname=Responsive%20Web%20Design%20%E2%80%93%20Videos)[https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fresponsive-web-design-videos%2F&linkname=Responsive%20Web%20Design%20%E2%80%93%20Videos](https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fresponsive-web-design-videos%2F&linkname=Responsive%20Web%20Design%20%E2%80%93%20Videos)[https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fresponsive-web-design-videos%2F&linkname=Responsive%20Web%20Design%20%E2%80%93%20Videos](https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fresponsive-web-design-videos%2F&linkname=Responsive%20Web%20Design%20%E2%80%93%20Videos)[https://www.addtoany.com/share](https://www.addtoany.com/share)