Cómo crear: Iframe responsivo

Aprenda a crear iframe responsivos utilizando CSS.

Iframe responsivo

Cree un iframe que mantenga la relación de aspecto (4:3, 16:9, etc.) al ajustar el tamaño:

¿Qué es la relación de aspecto?

La relación de aspecto de un elemento describe la relación entre su anchura y altura. Dos relaciones de aspecto comunes de video son 4:3 (formato de video común del siglo XX) y 16:9 (formato de televisión HD común y televisión digital europea, así como el formato predeterminado de los videos de YouTube).

Cómo - Iframes responsivos

Primer paso - Añadir HTML:

Use elementos de contenedor, como <div>, y agregue iframe dentro de ellos:

<div class="container">
  <iframe class="responsive-iframe" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>

Segundo paso - Añadir CSS:

para padding-top Añada valores porcentajes para mantener la relación de aspecto del contenedor DIV. El siguiente ejemplo creará un contenedor con una relación de aspecto de 16:9, que es la relación de aspecto predeterminada de los videos de YouTube.

Ejemplo - Relación de aspecto 16:9

.container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* Relación de aspecto 16:9 (9 dividido por 16 es 0.5625) */
{}
/* Luego configure el estilo del iframe para que se ajuste completamente en altura y anchura al contenedor div */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
{}

亲自试一试

Otras relaciones de aspecto

Ejemplo - Relación de aspecto 4:3

.container {
  padding-top: 75%; /* Relación de aspecto 4:3 */
{}

亲自试一试

Ejemplo - Relación de aspecto 3:2

.container {
  padding-top: 66.66%; /* Relación de aspecto 3:2 */
{}

亲自试一试

Ejemplo - Relación de aspecto 8:5

.container {
  padding-top: 62.5%; /* Relación de aspecto 8:5 */
{}

亲自试一试

Ejemplo - 1:1 Relación de aspecto (altura y anchura siempre iguales)

.container {
  padding-top: 100%; /* 1:1 宽高比 */
{}

亲自试一试