Practical Exercise 19: Internal Page Iframe

Learn how to insert an internal page within another using the <iframe> tag in HTML. This practical exercise will teach you how to effectively and structurally integrate internal content into your website.

Activity

Insert an HTML page inside another using <iframe>.

Solution with complete HTML code

Create an HTML document with the following code:

index.html
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Iframe</title>
  </head>
  <body>
    <h1>Página con Iframe</h1>
    <iframe src="page.html" width="600" height="400"></iframe>
  </body>
</html>

AI PlatformTurn Code into Customers.Try it free

Inside the same folder, create another file to use as the internal page.

page.html
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Iframe - Página interna</title>
  </head>
  <body>
    <h1>Mi página interna de ejemplo.</h1>
  </body>
</html>

Variants of the Same Exercise

Variant 1: Responsive Iframe with CSS

Iframes with fixed measurements (width="600" height="400") don't adapt to mobile devices. This CSS technique makes any iframe responsive while maintaining its aspect ratio.

HTML
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Responsive Iframe</title>
    <style>
      /* Classic technique: container with relative position and aspect ratio padding */
      .iframe-responsive {
        position: relative;
        width: 100%;
        padding-bottom: 56.25%; /* 16:9 = 9/16 = 0.5625 = 56.25% */
        height: 0;
        overflow: hidden;
      }
      .iframe-responsive iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
      }

      /* Modern alternative using aspect-ratio */
      .iframe-moderno {
        width: 100%;
        aspect-ratio: 16 / 9;
      }
      .iframe-moderno iframe {
        width: 100%;
        height: 100%;
        border: 0;
      }
    </style>
  </head>
  <body>
    <h1>Mobile-Adaptive Iframe</h1>

    <h2>Classic technique (padding-bottom)</h2>
    <div class="iframe-responsive">
      <iframe
        src="https://www.youtube.com/embed/dQw4w9WgXcQ"
        title="Classic responsive video"
        allowfullscreen
      ></iframe>
    </div>

    <h2>Modern technique (aspect-ratio)</h2>
    <div class="iframe-moderno">
      <iframe
        src="page.html"
        title="Responsive internal page"
      ></iframe>
    </div>
  </body>
</html>

Common ratios for padding-bottom:

16:9 (HD video) → 56.25%
4:3 (classic video) → 75%
9:16 (shorts/reels) → 177.78%
1:1 (square) → 100%

Variant 2: `sandbox` Attribute for Permission Control

The sandbox attribute restricts what the iframe can do. This is fundamental for security, especially with third-party content.

HTML
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Sandbox in Iframe</title>
    <style>
      .ejemplo {
        border: 1px solid #ddd;
        padding: 16px;
        margin: 16px 0;
        border-radius: 8px;
      }
      .ejemplo h3 {
        margin-top: 0;
      }
    </style>
  </head>
  <body>
    <h1>Permission Control with Sandbox</h1>

    <div class="ejemplo">
      <h3>🔒 Maximum restriction (empty sandbox)</h3>
      <p>The content cannot execute scripts, submit forms, or access cookies.</p>
      <iframe
        src="page.html"
        sandbox=""
        width="100%"
        height="200"
        title="Empty sandbox"
      ></iframe>
    </div>

    <div class="ejemplo">
      <h3>🔓 Selected permissions (granular sandbox)</h3>
      <p>We allow scripts and forms, but not popups or top navigation.</p>
      <iframe
        src="page.html"
        sandbox="allow-scripts allow-forms allow-same-origin"
        width="100%"
        height="200"
        title="Granular sandbox"
      ></iframe>
    </div>

    <div class="ejemplo">
      <h3>🌐 Without sandbox (no restrictions)</h3>
      <p>The iframe behaves like a normal page within your site.</p>
      <iframe
        src="page.html"
        width="100%"
        height="200"
        title="No sandbox"
      ></iframe>
    </div>
  </body>
</html>

Most important sandbox tokens:

allow-scripts — allows JavaScript execution
allow-forms — allows form submission
allow-same-origin — treats the iframe as same-origin (cookies, localStorage)
allow-popups — allows opening popups
allow-top-navigation — allows changing the parent page URL

Variant 3: `loading="lazy"` for Performance

The loading="lazy" attribute delays loading the iframe until the user scrolls near it. This dramatically improves page performance.

HTML
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Lazy Loading Iframes</title>
    <style>
      .espaciador {
        height: 800px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f0f0f0;
        border: 2px dashed #ccc;
        margin: 20px 0;
        font-size: 24px;
        color: #999;
      }
      iframe {
        border: 1px solid #ddd;
      }
    </style>
  </head>
  <body>
    <h1>Deferred Loading Iframes</h1>
    <p>
      Scroll down. The iframes are only loaded when they're about to
      enter the screen.
    </p>

    <div class="espaciador">⬆️ Content before the iframes ⬆️</div>

    <h2>Iframe 1</h2>
    <p>
      This iframe uses <code>loading="lazy"</code>. It won't load until visible.
    </p>
    <iframe
      src="https://www.youtube.com/embed/dQw4w9WgXcQ"
      width="560"
      height="315"
      loading="lazy"
      title="Video with lazy loading"
      allowfullscreen
    ></iframe>

    <h2>Iframe 2</h2>
    <p>Second iframe also with deferred loading.</p>
    <iframe
      src="https://www.youtube.com/embed/9bZkp7q19f0"
      width="560"
      height="315"
      loading="lazy"
      title="Second video with lazy loading"
      allowfullscreen
    ></iframe>

    <div class="espaciador">⬇️ More content below ⬇️</div>

    <p>
      If we had used <code>loading="eager"</code> or no attribute,
      all iframes would load when opening the page, consuming unnecessary
      bandwidth.
    </p>
  </body>
</html>

Benefits of loading="lazy":

The page loads faster (lower LCP — Largest Contentful Paint)
The user doesn't download iframes they never see
Bandwidth savings on mobile devices
Native support in Chrome 77+, Firefox 75+, Safari 16.4+

Variant 4: Google Maps with iframe

A practical real-world use of iframes: embedding an interactive Google Maps map on your contact or location page.

HTML
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Interactive Map</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
      }
      .mapa-container {
        width: 100%;
        aspect-ratio: 16 / 9;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
      }
      .mapa-container iframe {
        width: 100%;
        height: 100%;
        border: 0;
      }
      .info-contacto {
        margin: 24px 0;
        padding: 20px;
        background: #f8f8f8;
        border-radius: 8px;
      }
    </style>
  </head>
  <body>
    <h1>📍 Our Location</h1>

    <div class="info-contacto">
      <p><strong>Address:</strong> Av. Corrientes 1234, CABA, Buenos Aires</p>
      <p><strong>Phone:</strong> +54 11 4321-5678</p>
      <p><strong>Hours:</strong> Monday to Friday 9:00 AM – 6:00 PM</p>
    </div>

    <div class="mapa-container">
      <iframe
        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3283.9966623318455!2d-58.3843214!3d-34.608465!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x95bccacb9a1cd127%3A0x75b5b5e5eeb5b5b5!2sAv.%20Corrientes%201234!5e0!3m2!1ses-419!2sar!4v1620000000000"
        title="Location map"
        allowfullscreen=""
        loading="lazy"
        referrerpolicy="no-referrer-when-downgrade"
      ></iframe>
    </div>

    <p style="color: #666; font-size: 14px; margin-top: 12px;">
      Use the interactive map to get directions from your current location.
    </p>
  </body>
</html>

To get the embed code for any location: open Google Maps → search the address → click "Share" → "Embed a map" tab → copy the HTML.

Best Practices and Common Mistakes

✅ Best Practice	❌ Common Mistake
Add a descriptive `title` to the iframe for accessibility	Leave iframes without `title` (screen readers read "iframe")
Use `loading="lazy"` for iframes below the fold	Load 5+ YouTube iframes above the fold
Use `sandbox` for third-party or untrusted content	Blindly trust iframes from any origin
Make the iframe responsive with `aspect-ratio` or padding-bottom	Use fixed `width="800" height="600"` that overflows on mobile
Use `referrerpolicy` to control what information is sent	Leave iframes without a referrer policy on sites with sensitive data
Verify that the embedded page allows iframes (X-Frame-Options)	Assume any site can be embedded

Frequently Asked Questions (FAQ)

Why can't some sites be embedded in an iframe?

Many sites configure the HTTP header X-Frame-Options: DENY or X-Frame-Options: SAMEORIGIN to prevent other pages from embedding them in iframes. This is a security measure against clickjacking attacks. GitHub, Google (search), Facebook, and Instagram are examples of sites that block iframes.

Does an iframe affect my page's SEO?

The content inside the iframe is not indexed as part of your page. Google sees the iframe as an empty container pointing to another URL. If the content is important for your SEO, don't put it in an iframe. However, iframes with loading="lazy" can improve Core Web Vitals (loading speed), which indirectly benefits SEO.

How can I communicate between an iframe and the parent page?

Through the window.postMessage() API. The iframe can send messages to the parent page with parent.postMessage(data, origin) and the parent page can listen with window.addEventListener('message', callback). This is the secure way of cross-origin communication between iframes.

Are `<iframe>` and `<embed>` the same?

No. <iframe> is the modern standard for embedding HTML pages and external content. <embed> is older, designed for plugins (Flash, PDFs), and although it still works, <iframe> is the recommended option for most cases. <object> is another alternative for embedded content that can show custom fallback messages.

tip

🌐 Want to know more about iframes and multimedia elements? Dive deeper into HTML Elements and Tags where we cover all embedded content tags.

Practical Exercise 19: Internal Page Iframe

Activity​

Solution with complete HTML code​

Variants of the Same Exercise​

Variant 1: Responsive Iframe with CSS​

Variant 2: sandbox Attribute for Permission Control​

Variant 3: loading="lazy" for Performance​

Variant 4: Google Maps with iframe​

Best Practices and Common Mistakes​

Frequently Asked Questions (FAQ)​

Why can't some sites be embedded in an iframe?​

Does an iframe affect my page's SEO?​

How can I communicate between an iframe and the parent page?​

Are <iframe> and <embed> the same?​