Gerador de iframe

Introduza qualquer URL e obtenha gratuitamente um código iframe limpo — de tamanho fixo ou adaptável — para incorporar uma página, formulário ou aplicação no seu website. Sem necessidade de registo.
Gerador de iframe
Qualquer página que permita incorporação, por exemplo https://example.com/booking/

A pré-visualização aparece em branco ou diz «recusou-se a ligar»? O site não permite que outros sites o mostrem numa moldura (pelo cabeçalho X-Frame-Options ou Content-Security-Policy) e só o respetivo proprietário o pode alterar. Saiba mais

A incorporar formulários, avaliações ou feeds? Ver Widgets Elfsight →
O que a página incorporada fica a saber sobre a origem do visitante (o atributo referrerpolicy).
Proporcional: a altura acompanha a largura, como num vídeo. Fixa: uma altura definida em píxeis.

Incorpore a página

<div style="position:relative;width:100%;aspect-ratio:16 / 9;">
  <iframe src="https://example.com/" title="example.com" loading="lazy" style="position:absolute;inset:0;width:100%;height:100%;border:0;"></iframe>
</div>
<p style="margin:4px auto 0;text-align:center;font:11px/1.4 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:#a3a7b0;">Criado com <a href="https://elfsight.pt/tools/iframe-generator/" target="_blank" rel="noopener" style="color:inherit;text-decoration:none;">Elfsight</a></p>

  1. Clique em Copiar código acima para o copiar.
  2. Abra o ficheiro HTML ou o modelo da página.
  3. Cole o código dentro de <body>, onde o conteúdo deve aparecer.
  4. Guarde e carregue a página e abra-a num navegador para verificar.

A incorporar formulários, avaliações ou feeds? Os widgets da Elfsight fazem-no sem iframes e combinam com o design do seu site. Ver Widgets Elfsight →

Antes de sair

A incorporar formulários, avaliações ou feeds? Os widgets da Elfsight fazem-no sem iframes e combinam com o design do seu site.

Ver Widgets Elfsight →
Ou partilhe esta ferramenta gratuita:

Gerador de iframe vs escrever o iframe à mão

Um iframe é uma linha de HTML, mas os atributos que o tornam acessível, rápido e seguro são fáceis de esquecer ou de escrever mal. Eis o que muda quando o cria com o gerador.
Escrever o iframe à mão
Este gerador
Atributos
Tem de se lembrar do nome de cada atributo e dos seus valores exatos.
Escolha os atributos de uma lista, com uma breve explicação junto a cada um.
Título acessível
Muitas vezes omitido, por isso os utilizadores de leitores de ecrã não sabem o que a moldura contém.
Pede um title para que a moldura fique identificada para as tecnologias de apoio.
Sandbox
Escreve você mesmo os tokens allow-* e procura o que cada um desbloqueia.
Uma caixa de seleção para cada token, com uma explicação simples do que permite.
Tamanho adaptável
Escreve o CSS para uma proporção ou uma altura fixa.
Escolha uma proporção ou uma altura fixa; o código inclui o dimensionamento.
Esta página pode ser incorporada?
Só descobre depois de publicar, quando a moldura aparece vazia.
Verifica os cabeçalhos X-Frame-Options e frame-ancestors da página antes de copiar o código.
Links de vídeo e formulários
Uma página de visualização do YouTube ou um link do Google Forms colado tal como está pode não carregar ou ter mau aspeto.
Reconhece links do YouTube, Vimeo e Google Forms e encaminha-o para o gerador dedicado.

Atributos

Escrever o iframe à mão

Tem de se lembrar do nome de cada atributo e dos seus valores exatos.

Este gerador

Escolha os atributos de uma lista, com uma breve explicação junto a cada um.

Título acessível

Escrever o iframe à mão

Muitas vezes omitido, por isso os utilizadores de leitores de ecrã não sabem o que a moldura contém.

Este gerador

Pede um title para que a moldura fique identificada para as tecnologias de apoio.

Sandbox

Escrever o iframe à mão

Escreve você mesmo os tokens allow-* e procura o que cada um desbloqueia.

Este gerador

Uma caixa de seleção para cada token, com uma explicação simples do que permite.

Tamanho adaptável

Escrever o iframe à mão

Escreve o CSS para uma proporção ou uma altura fixa.

Este gerador

Escolha uma proporção ou uma altura fixa; o código inclui o dimensionamento.

Esta página pode ser incorporada?

Escrever o iframe à mão

Só descobre depois de publicar, quando a moldura aparece vazia.

Este gerador

Verifica os cabeçalhos X-Frame-Options e frame-ancestors da página antes de copiar o código.

Links de vídeo e formulários

Escrever o iframe à mão

Uma página de visualização do YouTube ou um link do Google Forms colado tal como está pode não carregar ou ter mau aspeto.

Este gerador

Reconhece links do YouTube, Vimeo e Google Forms e encaminha-o para o gerador dedicado.

Referência dos atributos do iframe

O que cada atributo faz e quando o usar. Dica de segurança: dê ao conteúdo de terceiros o mínimo de permissões de que precisa.
Opção
O que faz
Valores
Notas
src
O endereço da página a mostrar dentro da moldura.
Um URL completo
Use um endereço https://. Num site HTTPS, os navegadores bloqueiam molduras que carreguem por http:// simples.
title
Identifica a moldura para os leitores de ecrã.
Texto curto, por exemplo «Mapa da localização da loja»
Descreva o conteúdo em poucas palavras. Sem ele, quem usa tecnologias de apoio tem de entrar na moldura para saber o que contém.
width / height
Define o tamanho da moldura em píxeis.
Números; sem eles, a moldura tem 300 × 150
Para uma moldura que se ajusta à página, use CSS (width: 100% e aspect-ratio) em vez de números fixos.
loading
Controla quando o navegador carrega a moldura.
eager (predefinição), lazy
lazy espera até a moldura estar perto da área visível, o que acelera o carregamento inicial da página. Bom para molduras mais abaixo na página.
allow
Concede à página incorporada acesso a funcionalidades do navegador (política de permissões).
Uma lista separada por ponto e vírgula, por exemplo fullscreen; autoplay
Liste apenas as funcionalidades de que o conteúdo precisa. A câmara, o microfone e a geolocalização merecem cuidado extra.
allowfullscreen
Permite que a moldura passe a ecrã inteiro.
Presente ou ausente
Um atributo antigo. O equivalente moderno é allow="fullscreen"; muitos códigos de incorporação incluem ambos.
referrerpolicy
Controla quanto do endereço da sua página é enviado ao site incorporado.
no-referrer, origin, strict-origin-when-cross-origin (predefinição) e outros
A predefinição envia apenas o seu domínio a outros sites. Evite unsafe-url: envia o endereço completo, mesmo a sites inseguros.
sandbox
Aplica restrições rigorosas à página incorporada. Cada token allow-* levanta uma restrição.
Vazio (todas as restrições) ou tokens como allow-scripts, allow-forms, allow-popups
Use-o para conteúdo em que não confia totalmente. Não combine allow-scripts e allow-same-origin numa página do seu próprio site: juntos, permitem que a página remova o sandbox.

src

O que faz

O endereço da página a mostrar dentro da moldura.

Valores

Um URL completo

Notas

Use um endereço https://. Num site HTTPS, os navegadores bloqueiam molduras que carreguem por http:// simples.

title

O que faz

Identifica a moldura para os leitores de ecrã.

Valores

Texto curto, por exemplo «Mapa da localização da loja»

Notas

Descreva o conteúdo em poucas palavras. Sem ele, quem usa tecnologias de apoio tem de entrar na moldura para saber o que contém.

width / height

O que faz

Define o tamanho da moldura em píxeis.

Valores

Números; sem eles, a moldura tem 300 × 150

Notas

Para uma moldura que se ajusta à página, use CSS (width: 100% e aspect-ratio) em vez de números fixos.

loading

O que faz

Controla quando o navegador carrega a moldura.

Valores

eager (predefinição), lazy

Notas

lazy espera até a moldura estar perto da área visível, o que acelera o carregamento inicial da página. Bom para molduras mais abaixo na página.

allow

O que faz

Concede à página incorporada acesso a funcionalidades do navegador (política de permissões).

Valores

Uma lista separada por ponto e vírgula, por exemplo fullscreen; autoplay

Notas

Liste apenas as funcionalidades de que o conteúdo precisa. A câmara, o microfone e a geolocalização merecem cuidado extra.

allowfullscreen

O que faz

Permite que a moldura passe a ecrã inteiro.

Valores

Presente ou ausente

Notas

Um atributo antigo. O equivalente moderno é allow="fullscreen"; muitos códigos de incorporação incluem ambos.

referrerpolicy

O que faz

Controla quanto do endereço da sua página é enviado ao site incorporado.

Valores

no-referrer, origin, strict-origin-when-cross-origin (predefinição) e outros

Notas

A predefinição envia apenas o seu domínio a outros sites. Evite unsafe-url: envia o endereço completo, mesmo a sites inseguros.

sandbox

O que faz

Aplica restrições rigorosas à página incorporada. Cada token allow-* levanta uma restrição.

Valores

Vazio (todas as restrições) ou tokens como allow-scripts, allow-forms, allow-popups

Notas

Use-o para conteúdo em que não confia totalmente. Não combine allow-scripts e allow-same-origin numa página do seu próprio site: juntos, permitem que a página remova o sandbox.

MDN Web Docs: o elemento iframe ↗

Porque é que um site não abre num iframe

A moldura está vazia ou mostra «recusou-se a ligar».

O site envia um cabeçalho X-Frame-Options. DENY bloqueia qualquer incorporação; SAMEORIGIN permite-a apenas nas páginas do próprio site. O site proibiu a incorporação e isto não pode ser contornado do seu lado. Aponte antes um link para a página ou pergunte ao proprietário do site se oferece uma incorporação.

A política de segurança do site bloqueia a moldura.

O site envia Content-Security-Policy com frame-ancestors, que lista os sites autorizados a incorporá-lo ('none' significa ninguém). Quando está presente, os navegadores seguem-na em vez de X-Frame-Options. Só o proprietário do site pode adicionar o seu domínio à lista.

A moldura carrega sozinha, mas não no seu site HTTPS.

O src começa por http://. Os navegadores bloqueiam molduras inseguras em páginas seguras e não as atualizam automaticamente. Mude o endereço para https://; se o site não tiver versão HTTPS, não pode ser incorporado numa página segura.

Um link do YouTube mostra um erro em vez do vídeo.

As páginas de visualização normais do YouTube proíbem a incorporação. Use o endereço de incorporação do vídeo (youtube.com/embed/…) ou o gerador dedicado do YouTube.

A página carrega, mas os botões, formulários ou links no seu interior não fazem nada.

O atributo sandbox está a bloqueá-los. Adicione apenas os tokens de que precisa: allow-scripts para conteúdo interativo, allow-forms para submeter formulários, allow-popups para links que abrem um novo separador.

O vídeo não passa a ecrã inteiro, ou a câmara ou o microfone não funcionam.

Estas funcionalidades têm de ser concedidas no atributo allow, por exemplo allow="fullscreen; camera; microphone".

O seu construtor de sites remove o código depois de guardar.

Alguns editores removem os iframes dos blocos de texto normais. Cole o código num bloco de HTML personalizado ou de incorporação.

Como criar um iframe

  1. Introduza o endereço da página

    Cole o URL da página que quer mostrar.

  2. Defina o tamanho e o comportamento

    Escolha o tamanho, mantenha-o adaptável e permita o deslocamento ou o ecrã inteiro, se necessário.

  3. Verifique a pré-visualização

    Alguns sites não permitem ser mostrados numa moldura — a pré-visualização mostra-o de imediato.

  4. Copie o código

    Cole o código num bloco HTML do seu site.

Perguntas frequentes

Mais Geradores de código de incorporação