<hr />
<h2 id="heading-usando-la-propiedad-width">Usando la propiedad <code>width</code></h2>
Si la propiedad <code>width</code> se establece en 100%, el reproductor de video responderá y se ampliará hacia arriba y hacia abajo:
Ejemplo:
<pre><code class="lang-css">video {
 width: 100%;
 height: auto;
}
</code></pre>
<a target="_blank" href="https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_video2">Ver ejemplo</a>
Tenga en cuenta que en el ejemplo anterior, el reproductor de vídeo se puede ampliar para que sea mayor que su tamaño original. Una mejor solución, en muchos casos, será utilizar la propiedad <code>max-width</code>.
<hr />
<h2 id="heading-usando-la-propiedad-max-width">Usando la propiedad <code>max-width</code></h2>
Si la propiedad <code>max-width</code> está configurada en 100%, el reproductor de video se reducirá si es necesario, pero nunca aumentará para ser mayor que su tamaño original:
Ejemplo:
<pre><code class="lang-css">video {
 max-width: 100%;
 height: auto;
}
</code></pre>
<a target="_blank" href="https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_video">Ver ejemplo</a>
<hr />
<h2 id="heading-agregue-un-video-a-la-pagina-web-de-ejemplo">Agregue un video a la página web de ejemplo</h2>
Queremos agregar un video en nuestra página web de ejemplo. El vídeo cambiará de tamaño para ocupar siempre todo el espacio disponible:
Ejemplo:
<pre><code class="lang-css">video {
 width: 100%;
 height: auto;
}
</code></pre>
<a target="_blank" href="https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_video3">Ver ejemplo</a>
<hr />
Traducido con 💚 desde <a target="_blank" href="http://W3Schools.com"><a href="http://W3Schools.com" class="autolinkedURL autolinkedURL-url" target="_blank">W3Schools.com</a></a>

---

## Usando la propiedad `width`

Si la propiedad `width` se establece en 100%, el reproductor de video responderá y se ampliará hacia arriba y hacia abajo:

**Ejemplo:**

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

[**Ver ejemplo**](https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_video2)

Tenga en cuenta que en el ejemplo anterior, el reproductor de vídeo se puede ampliar para que sea mayor que su tamaño original. Una mejor solución, en muchos casos, será utilizar la propiedad `max-width`.

---

## Usando la propiedad `max-width`

Si la propiedad `max-width` está configurada en 100%, el reproductor de video se reducirá si es necesario, pero nunca aumentará para ser mayor que su tamaño original:

**Ejemplo:**

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

[**Ver ejemplo**](https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_video)

---

## Agregue un video a la página web de ejemplo

Queremos agregar un video en nuestra página web de ejemplo. El vídeo cambiará de tamaño para ocupar siempre todo el espacio disponible:

**Ejemplo:**

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

[**Ver ejemplo**](https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_video3)

---

*Traducido con 💚 desde* [*W3Schools.com*](http://W3Schools.com)

Si la propiedad width se establece en 100%, el reproductor de video responderá y se ampliará hacia arriba y hacia abajo.

Uso del elemento video en el diseño web responsive.

Contenido original de W3Schools

Responsive Web Design - Videos

Usando la propiedad width

Usando la propiedad max-width

Agregue un video a la página web de ejemplo

Desarrollador Frontend | HTML | CSS | JavaScript


Contenido sobre desarrollo web para principiantes. Organización y productividad para desarrolladores web.

Responsive Web Design - Videos

Contenido original de W3Schools

Table of contents

Usando la propiedad width

Usando la propiedad max-width

Agregue un video a la página web de ejemplo

Usando la propiedad `width`

Usando la propiedad `max-width`