Glossário Tutoriais

O que é iFrame

o que é iframe

iFrame é a abreviação de Inline Frame. É um elemento poderoso quando se trata de web designer.

Você provavelmente já viu diversos vídeos do YouTube em outros sites fora do YouTube. Um iFrame pode inserir todo tipo de mídia. E então você pode estar se perguntando como isso foi feito. As chances são de que o web designer colocou um elemento iFrame nessa página.

Neste artigo, nós vamos olhar com mais detalhes o que é um iFrame e como funciona, e vamos falar sobre outros pontos que você precisa saber antes de inserir um código iFrame no seu documento HTML.

O que é um iFrame

Um iFrame é um código em HTML que permite que um elemento seja exibido dentro de outro elemento. Somente possível em páginas HTML,  permite incorporar documentos, vídeos e mídia interativa em uma página.

Ao fazer isso, você pode exibir uma página secundária da web na sua página principal.

O elemento iFrame permite incluir um conteúdo de outras origens. Ele pode integrar o conteúdo em qualquer lugar da sua página, sem precisar incluí-los na estrutura do layout do seu site, como se fosse um elemento tradicional.

Mas nem por isso você pode usar o iFrame de forma excessiva. Isso pode diminuir a velocidade da sua página e colocar sua segurança em risco, especialmente se você incorporar conteúdos de alguns site suspeito.

Imagine o iFrame como parte do seu conteúdo, mas não parte do seu site. Por exemplo, se você quer adicionar um vídeo do YouTube em um post para estimular os seus leitores, então você pode inserir um elemento iFrame nele.

Como usar o iFrame

Até aqui você sabe que o iFrame é um elemento adicional para compartilhar conteúdo de outros sites. Você pode adicioná-lo como forma de contextualizar um determinado tópico para os leitores. Você pode inserir um elemento iFrame usando a tag <iframe> em um documento HTML. Copie o código abaixo e cole-o no bloco de notas e salve o arquivo como formato .html:

<iframe src="https://www.youtube.com/embed/dXBohfjc4WA" width="680" height="480" allowfullscreen></iframe>

exemplo de video exibido om iframe

O código acima exibirá um vídeo tutorial do YouTube feito por nós, da Hostinger. Vamos examinar cada tag separadamente:

A tag <iframe>…</iframe> é usada para que seja inserido o vídeo dentro do iFrame.

  • O iFrame source (src) é a origem do conteúdo, seja do servidor interno o externo. Não se esqueça de incorporar o código na url.
  • Width (largura) e height (altura) são os aspectos visuais do iFrame. Você pode inserir uma medida fixa como 680×480 pixels (px) no exemplo. Ou, você pode usar o método de porcentagem (10%-100%) na qual o iFrame será ajustado automaticamente.

Ameaças e Segurança

Por natureza, o elemento iFrame não representa nenhum risco de segurança para sua página ou para seus leitores. O código foi desenvolvido para ajudar os criadores de conteúdo a adicionar um material que fosse visualmente atraente aos leitores, como os vídeos. No entanto, você precisa prestar mais atenção quando adicionar um iFrame de um site do site não confiável.

Houve um surto de uso de código iFrame em alguns sites populares, como o ABC News, em 2008. Esse tipo de ataque redireciona os visitantes para um site malicioso, que instala um vírus no computador do visitante ou tenta roubar informações confidenciais. É por isso que não é recomendado incluir o iFrame como parte integrante do seu site.

Se você tem dúvidas sobre a segurança de um site, não perca seu tempo ao linkar este site no seu conteúdo com o iFrame.

Conclusão

O iFrame é um elemento poderoso se você quiser mais engajamento para seus visitantes. Tenha o iFrame como parte do conteúdo que você produz, não como parte integral do seu site.

Você não deve usar excessivamente o iFrame. É bem melhor se você puder desenvolver seu site sem o elemento iFrame. Se você ainda precisar usá-lo para fins de desenvolvimento, lembre-se apenas de usar o conteúdo de um site de sua confiança.

Espero que este artigo tenha ajudado a entender e usar o iFrame.

Ariane G.

Ariane é jornalista, analista de conteúdo & SEO na Hostinger Brasil e tem o papel de contar para todo mundo o poder transformador da internet. Com foco em otimização, produção para web e técnicas de SEO, divide os dias entre pesquisas de palavras-chave e passagens aéreas (ela ama viajar).

Deixe um Comentário

Deixe seu comentário!

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.

Comece a Economizar Agora!

Hospedagem com tudo incluso e nome de domínio
R$2
29
/mês*