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>