Em uma lição anterior, você foi apresentado pela primeira vez ao elemento iframe. Nesta lição, você aprenderá mais sobre como trabalhar com o elemento iframe. Este elemento representa um frame embutido. É um elemento inline usado para incorporar outro conteúdo HTML diretamente dentro da página HTML. Esse conteúdo HTML pode ser um vídeo, mapa, outro elemento HTML ou até outras páginas da web. Aqui está um exemplo de como incorporar um curso popular do G.E.A.R ACADEMY do YouTube. Para ver um vídeo diferente, ative o editor interativo e altere o valor de src para um vídeo de sua escolha.

<iframe
  width="400"
  height="400"
  src="https://www.youtube.com/embed/PkZNo7MFNFg?si=-UBVIUNM3csdeiWF"
  title="Learn JavaScript - Full Course for Beginners (YouTube video)"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  referrerpolicy="strict-origin-when-cross-origin"
  allowfullscreen
></iframe>

O atributo src especifica a URL da página que você deseja incorporar. O atributo width especifica a largura do iframe. O atributo height especifica a altura do iframe. O atributo allowfullscreen permite que o usuário exiba o iframe em modo de tela cheia. Também é uma boa prática especificar um atributo title para o iframe, pois é importante para acessibilidade. O atributo allow, por outro lado, permite que você defina o que um iframe pode ou não pode fazer. Isso é chamado de allowlist. No exemplo acima, adicionar clipboard-write a ele permite que a página incorporada escreva itens na sua área de transferência. Itens em uma allowlist podem ser separados por ponto e vírgula ou espaços, e ambos podem ser usados juntos. Observe que o vídeo pode vir de qualquer lugar. Não precisa vir de serviços de vídeo como YouTube e Vimeo. Não esqueça que você também pode incorporar um mapa, outra página web ou HTML direto dentro do elemento iframe. Aqui está um exemplo de um mapa incorporado. Tente interagir com o mapa dando zoom in e zoom out.

<h1>A Map from Openstreetmap.org Embedded with the iframe Element</h1>

<iframe
  width="425"
  height="350"
  src="https://www.openstreetmap.org/export/embed.html?bbox=3.006134033203125%2C6.150112578753815%2C3.6357879638671875%2C6.749850810550778&amp;layer=mapnik"
  title="Map of Lagos area, Nigeria"
  style="border: 1px solid black"
>
</iframe>
<br />
<small>
  <a href="https://www.openstreetmap.org/#map=11/6.4501/3.3210">
    View Larger Map
  </a>
</small>

Se você quiser incorporar HTML direto dentro do elemento iframe você deve usar o atributo srcdoc em vez de src.