Gerador de iframe: código de embed para qualquer URL
Gerador de iframe
Gerador de iframe: código de embed responsivo com prévia | We.Inc
Gere código de iframe para qualquer URL: proporção responsiva ou tamanho fixo, lazy loading, título, tokens de sandbox, allow e referrer policy, com prévia ao vivo.
Cole o endereço que você quer incorporar, dê um título ao frame, escolha um formato responsivo ou um tamanho fixo, e este gerador escreve a tag iframe com lazy loading, tokens de sandbox, permissões e uma referrer policy. A prévia abaixo carrega o seu endereço para você confirmar que o site realmente permite ser exibido em frame antes de colar o código.
O que cada opção escreve
Opção
Atributo ou estilo
Padrão nesta ferramenta
Título
title="..."
Obrigatório, usado por leitores de tela
Formato responsivo
style="width:100%;aspect-ratio:16 / 9"
Tamanho fixo
width e height
O padrão do navegador é 300 por 150
Lazy loading
loading="lazy"
Ligado
Sandbox
sandbox="..."
Desligado; marque tokens para restringir
Permissões
allow="fullscreen; ..."
só fullscreen
Referrer
referrerpolicy="..."
A maioria dos trechos de iframe que circulam por aí deixa de fora pelo menos uma das coisas de que um embed moderno precisa: um título para tecnologias assistivas, lazy loading para não deixar a primeira tela lenta, um tamanho responsivo e o menor conjunto possível de permissões. Esta ferramenta escreve tudo isso para qualquer endereço. Para vídeos, mapas e páginas de agendamento de provedores conhecidos, nosso gerador de código de embed também converte os links de compartilhamento em links de embed.
Cole o endereço https completo da página a incorporar e escreva um título curto que diga o que ela é.
Escolha Responsivo com uma proporção, ou Fixo com largura e altura em pixels.
Deixe o lazy loading ligado, a menos que o embed fique bem no topo da página.
Marque tokens de sandbox se o conteúdo não for totalmente confiável, e marque só as permissões de que o embed precisa.
Clique em Carregar prévia para ver o embed exatamente como o código descreve, depois copie o código.
Se a prévia mostrar uma caixa cinza dizendo que a conexão foi recusada, o site proíbe ser exibido em frame. Nenhum atributo muda isso; veja nosso guia sobre esse erro.
Use o endereço de embed do próprio provedor para vídeos e mapas. Os endereços normais das páginas costumam ser bloqueados para frames.
Deixe o allow o menor possível. Cada recurso que você lista, como câmera ou geolocalização, é oferecido ao site incorporado.
Mantenha embeds pesados abaixo da primeira tela para que o lazy loading possa fazer o seu trabalho.
Não marque allow-scripts e allow-same-origin juntos para conteúdo do seu próprio site; juntos, eles anulam o sandbox.
Perguntas frequentes
Como deixar um iframe responsivo?
Dê a ele width: 100% e um aspect-ratio como 16 / 9, e deixe a altura automática. O navegador então mantém o formato em qualquer largura. O antigo truque do wrapper com padding-top não é mais necessário agora que aspect-ratio tem amplo suporte.
O que loading="lazy" faz em um iframe?
Adia o carregamento até o frame chegar perto da parte visível da página. eager, que carrega na hora, é o padrão. O lazy loading economiza dados e acelera a primeira visualização para frames mais abaixo.
Por que todo iframe deve ter um título?
Usuários de leitores de tela navegam entre frames pelos títulos. Um título claro, como "Agenda de reservas do estúdio de Leeds", diz a eles o que há dentro antes de entrarem.
O que devo colocar no atributo allow?
Só os recursos de que o embed precisa, separados por ponto e vírgula, por exemplo allow="fullscreen; picture-in-picture". Listar um recurso sem origem o permite para a origem do src. O allow só pode restringir o que o header Permissions-Policy da própria página permite, nunca ampliar.
A prévia envia meus dados para algum lugar?
Nenhum dado vem para nós. O código é montado nesta página. A prévia é um iframe comum no seu navegador, então o site incorporado recebe uma visita normal sua, igual a quando os seus visitantes o carregam.
Um checklist para todo embed
Título, tamanho, carregamento, permissões, sandbox, referrer: seis decisões, e o gerador deixa cada uma explícita. Os padrões aqui são os seguros: lazy, responsivo, uma referrer policy que envia só a origem entre sites e nenhuma permissão extra além de fullscreen.
Depois de colar o código, teste em largura de celular. Um frame com largura fixa em pixels é a causa mais comum de rolagem lateral no mobile.
Quando a prévia fica em branco ou é recusada
Uma caixa de erro cinza significa que o site incorporado enviou um header que bloqueia frames. Um frame branco vazio muitas vezes significa que o site precisa de scripts ou formulários que um token de sandbox marcado está bloqueando: desmarque o sandbox e tente de novo para distinguir os dois casos.
Alguns sites também detectam que estão em um frame e mostram uma página diferente. Esse comportamento é decisão deles e não pode ser mudado de fora.
Privacidade e desempenho
Todo iframe é uma página completa de outro site, com os próprios scripts e possivelmente os próprios cookies. Mencione o conteúdo de terceiros incorporado no seu aviso de privacidade e prefira modos de embed que respeitam a privacidade quando o provedor os oferece.
Se um embed é grande e opcional, considere um placeholder de clique para carregar: mostre uma imagem e um botão, e insira o iframe só quando alguém pedir.
Padrões prontos
Frame responsivo com aspect-ratio
Redimensione a janela e o frame mantém o formato. A página interna aqui vem do srcdoc, então o exemplo funciona offline.
Placeholder de clique para carregar
Nada do outro site carrega até o botão ser clicado. A tag template guarda o iframe real.
Monte o seu iframe
Endereço a incorporar (https)
Título (descreva o conteúdo)
Tamanho
Responsivo
Fixo
Proporção
Largura (px)
Altura (px)
Lazy load (loading="lazy")
Colocar o conteúdo em sandbox
Tokens de sandbox
Permissões (allow)
Referrer policy
Seu código
Copiar código
Carregar prévia
A prévia carrega o endereço no seu navegador. Uma caixa de erro cinza significa que esse site se recusa a ser exibido em frame.
Informe um endereço completo começando com https:// ou http://.