O que é um iframe?

Um iframe (inline frame) é um elemento HTML padrão, <iframe>, que carrega um documento web separado dentro de uma área retangular da página atual. O leitor de vídeo do YouTube e entregue desta forma: a página envolvente contínua a ser sua, enquanto a área enquadrada executa o próprio código do leitor do YouTube.

Porque o YouTube usa um iframe

Como o leitor corre na sua própria moldura, fica isolado do resto da página por segurança, recebe atualizações automáticas do YouTube sem que o site que incorpora mude fosse o que for, e pode ser trocado entre o domínio padrão youtube.com e o domínio youtube-nocookie.com, respeitador da privacidade, apenas mudando o URL de origem.

Atributos comuns do iframe em incorporações de vídeo

Os mais relevantes são src (o URL de incorporação e os seus parâmetros), title (para leitores de ecrã), allow (que permissões a moldura recebe, como autoplay ou fullscreen), allowfullscreen, e loading=”lazy” para desempenho.

Como o iframe se encaixa no resto de uma página web

Uma página web e normalmente um documento HTML contínuo, mas um iframe cria uma fronteira: tudo dentro dele é um documento separado, com os seus próprios scripts, estilos e contexto de navegação, apresentado dentro de uma caixa que posiciona com CSS normal. Este isolamento é tanto uma funcionalidade de segurança como técnica. Uma página que incorpora um iframe do YouTube não pode ler ou modificar diretamente o que acontece dentro do leitor, e o leitor não pode ler ou modificar diretamente o resto da sua página, para além do que cada lado permite explicitamente através de APIs do navegador.

Um exemplo prático

A diferença entre um iframe e simplesmente uma ligação para uma página e imediatamente visível se comparar os dois lado a lado. Uma ligação, <a href="https://youtube.com/watch?v=ID">Ver no YouTube</a>, leva o visitante completamente para fora da sua página. Um iframe, <iframe src="https://www.youtube-nocookie.com/embed/ID"></iframe>, mantém o visitante na sua página enquanto mostra o leitor do YouTube dentro de uma área definida. O atributo src desempenha funções muito diferentes em cada caso: destino de navegação versus origem de documento incorporado.

Iframe vs. outras técnicas de incorporação

Os iframes não são a única forma de trazer conteúdo externo, mas são a abordagem padrão para uma aplicação de terceiros totalmente interativa, como um leitor de vídeo. Alternativas como incorporar uma imagem estática ou um cartão de pré-visualização mostram muito menos: não podem oferecer controlos de reprodução, não podem transmitir dados de vídeo, e não podem responder a interação do utilizador da mesma forma que um leitor baseado em iframe faz. Para tudo o que exige interatividade real de outra origem, leitores de vídeo, mapas, widgets de pagamento, um iframe (ou as APIs mais especializadas construídas sobre um) é geralmente a única opção prática. Veja código de incorporação para perceber como um iframe é empacotado no HTML que realmente cola numa página.

Perguntas frequentes