O que é o design responsivo?

Design responsivo significa que o layout de uma página web se ajusta ao ecrã em que está a ser vista, de um pequeno telemóvel a um grande monitor de secretaria, em vez de se manter com um tamanho fixo. Aplicado a vídeo, significa que o leitor se ajusta ao seu contentor em vez de ser sempre apresentado com uma largura e altura fixas em pixeis.

A técnica padding-bottom

A forma mais comum de tornar uma incorporação responsiva é envolver o iframe num contentor com um padding-bottom baseado em percentagem (56.25% para vídeo 16:9), e posicionar o iframe de forma absoluta dentro dele a 100% de largura e altura. Isto mantém a proporção de aspeto correta em qualquer largura de contentor.

Uma alternativa mais recente

O CSS moderno também suporta a propriedade aspect-ratio diretamente, que alcanca um resultado semelhante com menos marcação nos navegadores que a suportam.

As duas técnicas principais para vídeo responsivo

O dimensionamento responsivo de vídeo é geralmente conseguido de duas formas. A técnica mais antiga e mais amplamente compatível envolve o iframe num contentor usando um padding-bottom baseado em percentagem (56.25% para vídeo 16:9) combinado com posicionamento absoluto, um truque que funciona de forma fiável desde que o design responsivo se tornou comum ha mais de uma década. A técnica mais recente usa a propriedade CSS aspect-ratio diretamente no contentor, que é mais curta de escrever e mais fácil de ler, ao custo de depender de uma funcionalidade CSS não suportada em alguns navegadores consideravelmente mais antigos.

Um exemplo prático comparando ambas as técnicas

<!-- Técnica padding-bottom -->
<div style="position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden;">
  <iframe src="..." style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;"></iframe>
</div>

<!-- Técnica aspect-ratio -->
<div style="width:100%;aspect-ratio:16/9;">
  <iframe src="..." style="width:100%;height:100%;border:0;"></iframe>
</div>

Ambas produzem o mesmo resultado visual em navegadores modernos; a escolha resume-se sobretudo a quanto suporte para navegadores mais antigos o seu público exige.

Design responsivo vs. incorporação de tamanho fixo

Uma incorporação de tamanho fixo, usando atributos literais de largura e altura, e mais simples de escrever mas deixa de funcionar assim que a página envolvente e vista num ecrã mais estreito do que essa largura fixa, ou transbordando o layout ou exigindo scroll horizontal. O design responsivo troca uma pequena quantidade de complexidade de configuração por uma incorporação que funciona corretamente em toda a gama de tamanhos de ecrã que os visitantes realmente usam, razão pela qual e a predefinição recomendada para essencialmente todos os sites modernos.

Perguntas frequentes