Getting to Know HTML Iframe: How to Embed YouTube and Google Maps

Basic Iframe Syntax

1<iframe src="https://example.com" width="600" height="400"></iframe>

• src → the URL of the content you want to embed
• width and height → the size of the frame

Embedding a YouTube Video

Go to a YouTube video → click Share → Embed → copy the code. It usually looks like this:

1<iframe
2  width="560"
3  height="315"
4  src="https://www.youtube.com/embed/aqz-KE-bpKQ"
5  title="Big Buck Bunny"
6  allow="
7    accelerometer;
8    autoplay;
9    clipboard-write;
10    encrypted-media;
11    gyroscope;
12    picture-in-picture;
13    web-share;
14  "
15  referrerpolicy="strict-origin-when-cross-origin"
16  allowfullscreen
17>
18</iframe>

The result:

You can also add loading=“lazy” to improve performance:

1<iframe
2  width="560"
3  height="315"
4  src="https://www.youtube.com/embed/VIDEO_ID"
5  title="YouTube video player"
6  loading="lazy"
7  allowfullscreen
8>
9</iframe>

Embedding Google Maps

From Google Maps → click Share → Embed a map → copy the iframe code.

<iframe
  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d63245.98372065553!2d110.33355936492256!3d-7.803163411126652!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e7a5787bd5b6bc5%3A0x21723fd4d3684f71!2sYogyakarta%2C%20Kota%20Yogyakarta%2C%20Daerah%20Istimewa%20Yogyakarta!5e0!3m2!1sid!2sid!4v1791529445162!5m2!1sid!2sid"
  width="600"
  height="450"
  style="border: 0"
  allowfullscreen=""
  loading="lazy"
  referrerpolicy="strict-origin-when-cross-origin"
></iframe>

Useful Attributes

Security and Performance Tips

Iframes can affect your page speed and security, so keep these in mind:

• Always add a title attribute for accessibility.
• Use loading=“lazy” so the iframe doesn’t slow down the initial page load.
• Avoid embedding too many iframes on one page.
• Use the sandbox attribute if you want to limit what the embedded content can do:

1<iframe src="..." sandbox="allow-scripts allow-same-origin"></iframe>

• Only embed content from trusted sources.

Quick Tips

• Prefer official embed codes from YouTube and Google Maps.
• Always set width and height to avoid layout shifts.
• Use loading=“lazy” for better performance.
• Don’t overuse iframes, they can make your page heavier.

With the <iframe> tag, you can easily embed videos, maps, and other external content while keeping some control over performance and security.