Inline Frame Tag - <iframe>

This lesson discusses the Inline Frame <iframe> tag and its usage in web development.

This tag is used to embed another document within the current document. It is used to display content from another website or source. It can also be used to embed videos, maps, or other media.

<iframe
  width="600"
  height="450"
  style="border:0;"
  allowfullscreen="true"
  loading="lazy"
  src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d1075.0761255478576!2d123.88209023319297!3d12.66699124573315!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e1!3m2!1sen!2sph!4v1737791388626!5m2!1sen!2sph"
>
</iframe>

The code above shows an example of the <iframe> tag. This tag is used to embed another document within the current document, which displays content from another website or source. The src attribute specifies the URL of the document to be embedded, while the width and height attributes specify the dimensions of the embedded document. In this example, an embedded Google Maps is shown.

Try the Following Embeds

YouTube Video

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  title="YouTube video player"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>

Google Maps

<iframe
  width="600"
  height="450"
  style="border:0;"
  allowfullscreen="true"
  loading="lazy"
  src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d1075.0761255478576!2d123.88209023319297!3d12.66699124573315!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e1!3m2!1sen!2sph!4v1737791388626!5m2!1sen!2sph"
>
</iframe>

PDF Document

<iframe
  width="600"
  height="450"
  style="border:0;"
  allowfullscreen="true"
  loading="lazy"
  src="https://assets.hostinger.com/content/tutorials/pdf/HTML-Cheatsheet.pdf"
></iframe>