English
EspañolIframe responsivo (YouTube, Google Maps e outros)
O iframe copiado do YouTube ou do Google Maps vem com largura fixa e estoura a tela do celular. Cole aqui e copie a versão que se ajusta.
Vídeo e mapa que cabem no celular
Disponível em: 
Iframe responsivo (YouTube, Google Maps e outros): para que serve
O código de incorporação do YouTube e do Google Maps vem com largura e altura fixas e estoura a tela do celular. Cole o iframe ou só o endereço e receba a versão que ocupa 100% da largura e mantém a proporção com aspect-ratio.
A ferramenta reconhece YouTube (inclusive Shorts em 9:16), Google Maps, Vimeo, Spotify, Instagram, Canva e Google Forms, sugere a proporção ou a altura certa, acrescenta loading=lazy, um title para leitores de tela e tela cheia, e mostra a prévia que você pode estreitar para ver como fica no celular.
Como usar
- Cole o iframe ou o endereço.
- Confira a proporção e o title.
- Copie o código para o site.
Quando usar
- Vídeo do YouTube na página inicial.
- Mapa do Google na página de contato.
- Player do Spotify ou formulário incorporado.
Perguntas frequentes
Por que o iframe estoura no celular?
O código de incorporação vem com width e height fixos, como 560 por 315. Num celular com 360 px de largura, o vídeo fica maior que a tela. O código gerado aqui usa largura de 100% e a propriedade aspect-ratio, que mantém a proporção em qualquer tela.
O que faz o loading=lazy?
O navegador só carrega o iframe quando ele está perto de aparecer na tela. Como vídeos e mapas pesam bastante, isso deixa o carregamento da página bem mais rápido quando eles ficam mais abaixo.
Para que serve o title no iframe?
Leitores de tela anunciam o title para dizer o que há dentro do iframe, como 'Vídeo: como chegar à loja'. Sem ele, a pessoa ouve só 'quadro' e não sabe do que se trata.
É grátis mesmo?
Sim, 100% grátis. Sem cadastro, sem assinatura e sem limite de uso. Todas as ferramentas do Ferramentas123 são gratuitas e rodam direto no seu navegador.