O que é um iframe?

Um <iframe> (inline frame) é um elemento HTML que incorpora outra página web ou documento dentro da página atual. Ele cria um contexto de navegação separado dentro de uma região retangular da página, permitindo que conteúdo de uma URL diferente — como um mapa, vídeo ou widget de terceiros — seja exibido sem que o usuário saia da página.

Iframes são comumente usados para incorporar vídeos do YouTube, Google Maps, formulários de pagamento, widgets de redes sociais e banners de publicidade. Como o conteúdo incorporado é executado em seu próprio contexto, atributos como sandbox e allow permitem que desenvolvedores controlem rigorosamente o que a página incorporada pode fazer.

Descrição da ferramenta

Esta ferramenta gera código HTML <iframe> pronto para colar a partir de um formulário simples. Configure a URL de origem, dimensões, comportamento de rolagem, estratégia de carregamento, permissões e restrições de sandbox, e a ferramenta gera instantaneamente a tag correspondente. Não é necessário escrever atributos manualmente ou memorizar a sintaxe dos flags de sandbox.

Exemplos

Iframe mínimo:

<iframe
  src="https://example.com"
  width="600"
  height="400"
  allowfullscreen
  style="border: none;"
></iframe>

Iframe com carregamento lazy e sandbox:

<iframe
  src="https://example.com"
  width="800"
  height="500"
  loading="lazy"
  allowfullscreen
  style="border: none;"
  sandbox="allow-scripts allow-same-origin"
></iframe>

Iframe com permissões de câmera e microfone:

<iframe
  src="https://meet.example.com"
  width="960"
  height="540"
  allowfullscreen
  style="border: none;"
  allow="camera; microphone; display-capture"
></iframe>

Recursos

  • Gera código <iframe> válido a partir de um formulário visual — nenhum conhecimento de HTML necessário
  • Controle total sobre permissões (allow) e restrições de sandbox
  • Atualização de visualização ao vivo conforme você altera qualquer opção

Opções explicadas

Opção Descrição
URL O atributo src — o endereço da página a ser incorporada
Largura / Altura Dimensões em pixels do iframe
Título Rótulo acessível (atributo title) para leitores de tela
Nome O atributo name, usado como alvo de link
Rolagem Controla a barra de rolagem: automática, sempre ativa ou sempre desativada
Carregamento eager carrega imediatamente; lazy adia até estar próximo da viewport
Permitir tela cheia Adiciona allowfullscreen para que o conteúdo incorporado possa ir para tela cheia
Borda Quando desmarcado, adiciona style="border: none;" para remover a borda padrão
Permitir recursos Concede permissões específicas de API do navegador à página incorporada
Flags de sandbox Restringe o que a página incorporada pode fazer; cada flag reativa uma capacidade específica

Dicas

  • Sempre forneça um atributo title para acessibilidade — leitores de tela o anunciam ao focar no iframe.
  • Use loading="lazy" para iframes abaixo da dobra para melhorar o desempenho de carregamento da página.
  • Adicionar o atributo sandbox sem flags bloqueia completamente o conteúdo; adicione apenas os flags que você realmente precisa.