🌱BeginnerImages and Media
Iframes
Embed external content YouTube videos, maps, widgets with the <iframe> element.
Overview
The <iframe> (inline frame) element embeds another HTML document inside your page. It is the standard way to embed YouTube videos, Google Maps, Spotify players, CodePen demos, and other external content.
The src attribute specifies the URL of the page to embed. width and height set the iframe's size. The title attribute is required for accessibility it describes what the iframe contains.
Iframes are sandboxed by default in modern browsers (the sandbox attribute adds further restrictions), which limits what the embedded content can do to protect users. Many sites block being embedded in iframes via the X-Frame-Options header.
Key Points
- •<iframe src="URL" title="description"> is the basic syntax
- •title attribute is required for accessibility describes the iframe content
- •width and height control the iframe dimensions; CSS can override these
- •The sandbox attribute restricts what the embedded page can do (forms, scripts, etc.)
- •Many sites (banks, Google, etc.) block iframe embedding via X-Frame-Options
- •YouTube and Maps provide ready-made embed code copy it rather than writing from scratch
Examples
Embedding a YouTube video
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
title="YouTube video: HTML Tutorial"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>Use the "Share > Embed" button on YouTube to get correct embed code.
Embedding Google Maps
<iframe
src="https://www.google.com/maps/embed?pb=..."
width="600"
height="450"
style="border:0"
allowfullscreen
loading="lazy"
title="Google Maps: Our office location"
></iframe>A sandboxed iframe for untrusted content
<iframe
src="https://external-widget.com"
title="External widget"
sandbox="allow-scripts allow-same-origin"
></iframe>sandbox with no value blocks everything. Add permissions back selectively.
Common Mistakes
- Forgetting the title attribute required for accessibility
- Trying to embed sites that block iframes (most major sites do)
- Not using the lazy loading attribute iframes block page load if not deferred
Note
For most external content (YouTube, Maps, social widgets), copy the embed code from the platform rather than writing the iframe manually they handle the correct parameters.
Exercises
Write HTML to solve each exercise. Use Preview to see it render in a live iframe, then mark as done.
Loading editor…
Completed: 0 / 5 exercises
Knowledge Check
Question 1 of 4