iframes responsivos

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

Digamos que você queira colocar nosso site Recursos front end em um <iframe>. Geralmente, a maneira padrão para se fazer isso é:

Sem nenhum outro estilo, você obteria um retângulo de 300×150 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.

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):

See the Pen iframe responsivo – Recursos front end by dpw (@desenvolvweb) on CodePen.

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 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 no elemento, o que, esperamos, se estenderia a iframes.