Tag iframe

A tag iframe permite incorporar o conteúdo de um site em outro. É usada para exibir conteúdo, como vídeos, imagens ou artigos, sem a necessidade de abrir uma nova janela ou aba.

O conteúdo do site incorporado terá o design daquele site específico. Enquanto isso, os estilos CSS do nosso site, assim como nosso código JavaScript não terão influência no conteúdo da tag iframe.

É possível aplicar nosso JavaScript ao conteúdo do iframe, mas para isso é necessário agir por métodos específicos.

A tag iframe é amplamente usada em sites para incorporar vídeos do YouTube e outras plataformas, assim como para exibir artigos e imagens de outras fontes.

Atributos

Atributo	Descrição
`src`	Especifica o endereço da página que deve ser incorporada.
`srcdoc`	Permite definir o conteúdo do iframe diretamente no atributo.
`frameborder`	Define uma borda ao redor do iframe. O valor `yes` define a borda (por padrão), e o valor `no` remove a borda.
`scrolling`	Define as barras de rolagem dentro do iframe. O valor `auto` - rolagem conforme a necessidade (por padrão), o valor `yes` - rolagem sempre, o valor `no` - sem rolagem.

Exemplo

Vamos inserir em nosso site um iframe com outro site (para o exemplo vamos usar o code.mu):

<iframe src="https://code.mu/" width="600" height="400"></iframe>

Exemplo

Vamos inserir em nosso site um vídeo do YouTube:

<iframe
	src="https://www.youtube.com/embed/KzQrHpB1H8U"
	allowfullscreen
	width="400"
	height="400">
</iframe>

Exemplo

Vamos escrever o conteúdo diretamente no iframe:

<iframe
	srcdoc="<h1>head</h1><p>text</p>"
	width="300"
	height="200">
</iframe>