Proporções, apenas com CSS

Vídeos são a grande mídia da Web. Conforme as redes sociais e tecnologias evoluíram, o vídeo começou a cada vez mais fazer parte da experiência de uso. Algumas são exclusivamente baseadas em vídeo, outras nem tanto.

O fato é que vídeo não é uma mídia que se adapta a qualquer tela, como as páginas responsivas, mas fixas em suas proporções. Para ter um vídeo "responsivo" seria necessário criar muitas versões em resoluções distintas, o que, dependendo do vídeo e dos custos, não valeria a pena.

Portanto, o mínimo que se pode fazer é tentar obedecer à proporção do vídeo, sem afetar o layout. Em JavaScript existem bibliotecas para lidar com isto, porém, se você já conhece o meu estilo, prefiro usar CSS sempre que possível para obter resultados como este. No momento, ainda não existe um jeito "oficial" de se aplicar proporções a um elemento CSS.

E a regra "aspect-ratio"?

Quando disse sobre não existir uma maneira "oficial" é justamente pelo fato de a regra aspect-ratio estar ainda, na data de publicação deste artigo, em fase experimental e não ser recomendada a sua utilização para sites em produção.

No entanto, a utilização assim que ela for suportada em todos os navegadores é bem simples, bastando apenas a menção da proporção desejada no valor, sem cálculos desnecessários.

.elemento {
  width: 100%;
  aspect-ratio: 16 / 9;
}

Neste caso, a altura irá ser calculada automaticamente pela proporção. Se a altura e largura forem informadas, a regra aspect-ratio será prontamente ignorada. Seria ótimo se ela já funcionasse, mas ainda não é o caso. Teremos de usar as famosas gambiarras para conseguir o mesmo efeito.

Como fazer?

O "hack" é basicamente este: fazer um elemento com posicionamento relativo, que possua uma largura, e margem interna inferior ou superior (padding-bottom/padding-top) com um valor em porcentagem que irá dar altura proporcional. Esta porcentagem é o número que fará o trabalho para nós. Para cada proporção desejada há um número mágico do padding.

Se você quer saber quais são algumas delas, segue abaixo:

Vídeo quadrado (Instagram / Facebook): 100%
Proporção de vídeos SD (4:3): 75%
Proporção de vídeos HD (16:9): 56,25%
Vídeos anamórficos: 41,9%

Após isto, basta colocar um elemento-filho com posição absoluta, ocupando toda a área do elemento-pai. Colocando isto em código CSS, temos o seguinte:

.widescreen {
  position: relative;
  padding-bottom: 56.25%;
  width: 100%;
}

.widescreen iframe {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
}

Pronto, se você chegou aqui só para copiar um código para colocar um vídeo em proporção 16:9, acredito que já esteja satisfeito. Mas se você quer aprender a fazer isto com qualquer proporção, continue por aqui.

Como se chegou a esses números?

Utilizando-se da matemática, sabemos que 4:3 ou 16:9 são apenas frações, e que basta resolvê-las e transformá-las em porcentagem para obter o valor da margem interna. Para ficar mais fácil de entender, veja o exemplo abaixo:

.widescreen {
  position: relative;
  padding-bottom: calc(90px / 160px * 100%); /* = 56,25% */
  width: 100%;
}

Esta função calc() do CSS resultará na mesma porcentagem (56,25%) que colocamos anteriormente, porém o cálculo será interpretado no navegador na hora que o CSS for carregado.

Com Sass, nem é preciso usar a função calc(), é só escrever o cálculo direto. Ao compilar, o CSS final mostrará apenas a porcentagem resultante.

.widescreen {
  position: relative;
  padding-bottom: 90px / 160px * 100%; // 56,25%
  width: 100%;
}

Portanto, a fórmula básica é a seguinte:

aspect-ratio = altura / largura * 100%

Tendo os valores de altura e largura do elemento que deseja ter a proporção obedecida é o suficiente para atingir o efeito.

Espero que tenha gostado da dica! Até a próxima!

dois:pontos