EMBEDS9 min20 XP

iframes & Embeds

Learn iframes & Embeds with syntax-highlighted examples, live output, and Shiv AI.

iframes and Embeds

The <iframe> tag embeds another web page inside your page. Used for YouTube videos, Google Maps, and external widgets. The name stands for Inline Frame.

Basic iframe

Example — Basic iframe

<iframe
  src="https://example.com"
  width="600"
  height="400"
  title="Example website"
  loading="lazy">
</iframe>

Always add title for screen readers. Always add loading="lazy" for performance.

Embedding a YouTube Video

Example — YouTube Embed

<!-- From YouTube: Share > Embed > copy the iframe -->
<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="HTML Tutorial for Beginners"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope"
  allowfullscreen
  loading="lazy">
</iframe>

HTML Tutorial for Beginners

YouTube embedded player — shows inside your page

Get the embed code from YouTube: Share button → Embed tab → copy the iframe code.

Responsive iframe

iframes have a fixed size by default which breaks on mobile. Wrap in a div to make it responsive:

Example — Responsive 16:9 Embed

<style>
  .video-wrap {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
  }
  .video-wrap iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
  }
</style>
<div class="video-wrap">
  <iframe src="https://www.youtube.com/embed/VIDEO_ID"
          title="Video"></iframe>
</div>

padding-bottom: 56.25% = 9/16 = exact 16:9 aspect ratio. Works at any screen width.

iframe AttributesReference

srcURL of the page or embed to show inside the frame

width heightSize in pixels or use CSS for responsive

titleDescribes content for screen readers. Required for accessibility

loading="lazy"Defers loading until iframe nears viewport. Speeds up page

allowfullscreenAllows fullscreen button in video embeds

sandboxRestricts what the embedded page can do. Security feature

Security: sandbox Attribute

When embedding untrusted content, add sandbox="" to block scripts, forms, and popups inside the frame. You can selectively allow: sandbox="allow-scripts allow-forms".

Not All Sites Allow Embedding

Many sites set X-Frame-Options: DENY to prevent being embedded. If an iframe shows blank, the site has blocked embedding. YouTube, Google Maps, and Spotify all support embedding.

Why iframes Exist

iframes were introduced in HTML 4 in 1997. They solve the problem of including third-party content — payment widgets, maps, video players — without running their full code in your page context.

Prev Next Lesson

Coding Infinite Report Bug Certificate

CIWeb HTML Course • 22 Lessons • Free

Explain with Analogies

Shiv AI explains this lesson using only real-life analogies. No code at all.

Click the Explain tab to generate analogies automatically.

index.html

Live Preview

Start coding - Shiv AI monitors automatically

Which attribute makes an iframe accessible to screen readers?

ExplanationThe title attribute describes what the iframe contains. Screen readers announce it so blind users know what is embedded before deciding to interact with it.

Build Challenge

Embed Challenge

Build a page with a YouTube embed and a responsive video wrapper.

Requirements (5 to pass)

iframe

src

title attr

loading lazy

responsive wrap

solution.html

Preview

Community Wall

Lesson 16

0/500

0/20 lines

Support CIWeb + Get +50 AI Messages

Just Rs.11 gives you 50 extra Shiv AI messages and keeps CIWeb free for everyone.