Como criar: Iframe Responível

Aprenda a usar CSS para criar iframes responsivos.

Iframe Responível

Crie um iframe que mantenha a proporção de largura e altura (4:3, 16:9, etc.) ao ajustar o tamanho:

O que é proporção de largura e altura?

A proporção de largura e altura de um elemento descreve a relação entre sua largura e altura. Dois tipos comuns de proporção de largura e altura de vídeos são 4:3 (formato de vídeo comum do século 20) e 16:9 (formato de TV HD e TV digital europeia, além de vídeos do YouTube).

Como - Iframes Responíveis

Primeira etapa - Adicionar HTML:

Use elementos de contêiner, como <div>, e adicione iframe dentro deles:

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

Segunda etapa - Adicionar CSS:

para padding-top Adicione valores em porcentagem para manter a proporção de largura e altura do div contêiner. O exemplo a seguir criará um contêiner com uma proporção de largura e altura de 16:9, que é a proporção padrão de vídeos do YouTube.

Exemplo - proporção de largura e altura 16:9

.container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* proporção de largura e altura 16:9 (9 dividido por 16 é 0.5625) */
{}
/* Em seguida, configure o estilo do iframe para que ele se ajuste à altura e largura completa do div contêiner */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
{}

Experimente você mesmo

Outras proporções de largura e altura

Exemplo - proporção de largura e altura 4:3

.container {
  padding-top: 75%; /* proporção de largura e altura 4:3 */
{}

Experimente você mesmo

Exemplo - proporção de largura e altura 3:2

.container {
  padding-top: 66.66%; /* proporção de largura e altura 3:2 */
{}

Experimente você mesmo

Exemplo - proporção de largura e altura 8:5

.container {
  padding-top: 62.5%; /* proporção de largura e altura 8:5 */
{}

Experimente você mesmo

Exemplo - 1:1 proporção de largura e altura (largura e altura sempre iguais)

.container {
  padding-top: 100%; /* Proporção de largura e altura 1:1 */
{}

Experimente você mesmo