IFRAMEs responsivos

O design responsivo da Web revolucionou a Web e estimulou um movimento de substituição de aplicativos nativos por aplicativos da Web facilmente personalizáveis para um ambiente móvel. Usamos media queries e dimensões não baseadas em pixels para facilitar o design responsivo; de fato, img { max-width: 100% } é um dos meus snippets de CSS favoritos. Os elementos IFRAME causam um problema totalmente diferente porque não estão restritos a dimensões. Encontrei um post incrível de Gregory Gan que descreve um método engenhoso para IFRAMEs responsivos e eu queria compartilhá-lo com todos os senhores!

O HTML

Para tornar seu IFRAME responsivo, você precisará envolvê-lo em um <div>:

<div class="iframe-container">
  <iframe width="1425" height="559" src="https://www.youtube.com/embed/BS4ojxHC1EM"></iframe>
</div>

O<div> será o quadro de referência reativo para o IFRAME.

O CSS

O pai <div> tem um conjunto interessante de CSS:

.iframe-container {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}

O padding-top é a parte interessante; definir o padding-top para uma porcentagem de height 9 / width 16 nos permite manter uma proporção desejável. Essa proporção corresponde à proporção entre a altura e a largura do YouTube, mas o senhor pode usar qualquer proporção para corresponder à proporção de uso do IFRAME.

Em seguida, o senhor define o CSS do IFRAME:

.iframe-container iframe {
  position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

O CSS do IFRAME não é digno de nota, pois o<div> faz a maior parte do trabalho; posicionar o IFRAME como absolute e definindo seu width e height para 100% restringe o elemento às dimensões reativas do DIV.

O CSS acima é tudo o que é necessário para transformar um IFRAME problemático e estático em um elemento reativo que é tão fácil de manipular quanto uma imagem. Parabéns a Gregory Gan por sua incrível postagem e dica!