IFRAMES9 min20 XP

iframes & Embeds

Learn iframes & Embeds with live examples, interactive editor, and Shiv AI code review.

iframes and Embeds

The <iframe> tag embeds another webpage inside your page. Used for YouTube videos, Google Maps, payment widgets, social media posts, and external content.

YouTube Embed

Example 1 — YouTube Video Embed

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="Learn HTML Tutorial"
  frameborder="0"
  allow="accelerometer;autoplay;clipboard-write;encrypted-media;gyroscope"
  allowfullscreen
  loading="lazy"
></iframe>

Get the embed URL from YouTube: Share → Embed → copy the src. Replace VIDEO_ID with the actual ID.

Google Maps Embed

Example 2 — Google Maps

<iframe
  src="https://maps.google.com/maps?q=New+Delhi&output=embed"
  width="600"
  height="400"
  title="CIWeb Office Location"
  loading="lazy"
  style="border:0"
  allowfullscreen
></iframe>

Google Maps gives you an embed code directly. Maps embeds must have a title for accessibility.

iframe Security Rules

sandboxRestricts iframe permissions. sandbox="" blocks scripts, forms, popups. Add permissions back one by one.

titleRequired for accessibility. Screen readers announce this when reaching the iframe.

loading="lazy"Defers loading until user scrolls near it. Speeds up initial page load significantly.

iframe Limitations

Many websites block being embedded in iframes using X-Frame-Options or Content-Security-Policy headers. For example, you cannot embed google.com or facebook.com. Always test your embed before deploying.

Prev Next Lesson

Coding Infinite Report Bug Certificate

CIWeb HTML Course • 22 Lessons • Free

Explain with Analogies

Shiv AI explains this lesson using real-life analogies.

Click Explain tab to generate.

index.html

Preview

Write code then click Deep Analyze

What does the sandbox attribute do on an iframe?

Explanationsandbox restricts what the embedded content can do — blocking scripts, forms, popups, and top-level navigation by default. You can selectively add permissions back with values like allow-scripts.

Build Challenge

Embed Page

Build a page with at least one iframe embed with title, width, height, and loading=lazy.

Requirements (5 to pass)

iframe

title attr

width height

loading lazy

src

solution.html

Preview

Community Wall

Lesson 16

0/500

0/20 lines