Código para Adicionar Iframe Responsivo para Videos Incorporados (Embed) - Bruno Devx - BR Criativus

post #6170

Código para Adicionar Iframe Responsivo para Videos Incorporados (Embed)

Publicado em: 15/04/2025 / Atualizado em: 15/04/2025

Categorias: BlogCSSIframe

Nesse post, eu vou compartilhar um código simples em HTML e CSS para que você consiga incorporar vídeos em seu site, de maneira que eles fiquem responsivos e com a medida de 16:9, que é recomendada para vídeos.

<style>
.responsive-iframe-container {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9; 
}

.responsive-iframe-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}
</style>

<div class="responsive-iframe-container">
  <iframe allowfullscreen="yes" scrolling="yes"
    src="{{ URL_DO_IFRAME }}"
    frameborder="0">
  </iframe>
</div>

Publicações recomendadas:


Link Direto

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link direto abaixo. Basta copiar.

bruno.art.br/?p=6170

ID de Referência: 6170

Sugira uma publicação

Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.

Clique aqui e entre em contato