• in
InterCourses
CoursesBlogs
0
← Introduction to HTML
○What is HTML?○Elements, Tags, and Attributes○Your First Complete Page
○Headings and Comments○Paragraphs, Emphasis, and Line Breaks○HTML Lists
○Hyperlinks○Images○Applying Styles to HTML
○Div and Span○HTML Tables○Classes and IDs
○Project 1 - Visiting Card Structure○Project 1 - Visiting Card Actions
○The Head Element and Page Title○Meta Tags○HTML Entities
○HTML Forms○Input Types○Checkboxes and Radio Buttons○Textarea and Select
○Embedding Video○Embedding Audio●Iframes
○Semantic HTML Tags○Details, Figure, and Figcaption
○Project 3 - Resume Semantic Structure○Project 3 - Resume Links and Actions

Iframes

The <iframe> (inline frame) element embeds another HTML page inside the current page. This is how YouTube embeds, Google Maps embeds, and many third-party widgets work.

Basic syntax

html
<iframe
    src="https://www.example.com"
    width="800"
    height="450"
    title="Example website"
></iframe>

Always include a title for accessibility — screen readers announce it to describe the iframe's content.

Common attributes

AttributeDescription
srcURL of the page to embed
widthWidth in pixels (or use CSS)
heightHeight in pixels (or use CSS)
titleAccessible description of the content
sandboxApplies security restrictions (see below)
allowfullscreenAllows the iframe to go full screen (needed for video embeds)
loadinglazy defers loading until scrolled near
frameborderDeprecated — use CSS border: none instead

Embedding a YouTube video

YouTube (and most video platforms) provide embed codes that use iframes:

html
<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>

The sandbox attribute

sandbox is a security feature that restricts what the embedded page can do:

html
<!-- Most restrictive — blocks scripts, forms, popups, and more -->
<iframe src="..." sandbox></iframe>

<!-- Allow only form submission -->
<iframe src="..." sandbox="allow-forms"></iframe>

<!-- Allow scripts and same-origin access -->
<iframe src="..." sandbox="allow-scripts allow-same-origin"></iframe>

Common sandbox tokens:

TokenAllows
allow-scriptsJavaScript execution
allow-formsForm submission
allow-same-originTreats iframe as same origin
allow-popupsOpening new windows
allow-top-navigationNavigating the top-level window

Limitations

  • Sites can block embedding using the X-Frame-Options or Content-Security-Policy HTTP headers
  • Cross-origin iframes cannot access each other's DOM (security restriction)
  • Iframes add extra HTTP requests and can slow page load

Your Task

  1. Add an <iframe> that embeds a public webpage (for example https://example.com).
  2. Set the src attribute on the iframe.
  3. Add a meaningful title attribute for accessibility.
  4. Set both width and height on the iframe.
  5. Add a sandbox attribute that allows scripts.
Hint 1
1 / 4
HINT 1

The src attribute is the URL of the page to embed.

Loading editor…
READY
intercourses
html