# iframes responsivos

> Aprenda a criar iframes responsivos com aspect ratio CSS. Técnica definitiva para vídeos YouTube, mapas e conteúdo incorporado adaptável. Funciona!

URL: https://dpw.dev/html/iframes-responsivos/  
Publicado em: 2019-08-26  
Categoria: html  
Tags: web-design-responsivo  
Autor: Tárcio Zemel

**iframes responsivos** geralmente são uma questão de choro e ranger de dentes entre frontenders. Mas, não necessariamente, precisa ser assim.

> Artigo baseado em [Responsive Iframes](https://css-tricks.com/responsive-iframes/).

Digamos que você queira colocar nosso site <a href="https://recursosfrontend.desenvolvimentoparaweb.com" target="_blank" rel="noopener noreferrer">Recursos front end</a> em um `<iframe>`. Geralmente, a maneira padrão para se fazer isso é:

```
<iframe src="https://recursosfrontend.desenvolvimentoparaweb.com"></iframe>
```

Sem nenhum outro estilo, você obteria um retângulo de 300x150 pixels de tamanho -- não há muita explicação apra isso; é apenas uma coisa mágica sobre iframes (e objetos).

Isso quase certamente não é o que você quer, então, você verá os atributos `width` e `height` diretamente no próprio iframe.

```
<iframe
  width="560"
  height="315"
  src="https://css-tricks.com"></iframe>
```

Esses atributos são bons de se ter. É um começo para reservar um espaço para o iframe.

Mas ainda é possível melhorar, já que são números fixos, em vez de uma configuração _responsive-friendly_.

## Então como é possível iframes responsivos?

O melhor truque para **iframes responsivos**, por enquanto, é criar uma caixa de relação de aspecto -- mais conhecida como _aspect ratio box_.

Primeiro, é preciso um elemento-pai com posicionamento relativo. O iframe é o elemento-filho dentro do qual você aplica o posicionamento absoluto para preencher a área.

A parte complicada é que o elemento-pai se torna a altura perfeita, criando um pseudo-elemento para empurrá-lo para essa altura com base na proporção.

O ponto principal é que empurrar o elemento para o tamanho correto é melhor do que forçar uma certa altura. No cenário em que o conteúdo interno é mais alto do que o que a proporção explica, ele ainda pode crescer em vez de "estourar" (_overflow_).

Veja uma demonstração completa aqui (lembrando que também funciona para imagens):

[Exemplo no CodePen](https://codepen.io/anon/pen/zgRZMX)

Se quiser testar melhor a responsividade do iframe, clique em "Edit on CodePen" para abrir o pen e ter um handler para controlar o tamanho em tempo real.

## Conclusão sobre iframes responsivos

Então, esta é uma maneira usando somente CSS para se chegar ao tão desejado **iframe responsivo**.

Existe o [atributo experimental `intrinsicsize`](https://googlechrome.github.io/samples/intrinsic-size/) que se poderia imaginar ser muito bom para iframes (e imagens). Além disso, há uma grande esperança na comunidade CSS que, em breve, existirá `aspect-ratio` em CSS -- e [a idéia de que se poderia usar os atributos `width` e `height`](https://css-tricks.com/what-if-we-got-aspect-ratio-sized-images-by-doing-almost-nothing/) no elemento, o que, esperamos, se estenderia a iframes.

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml