HTML Iframes

An iframe (inline frame) shows another web page inside a box on your page.

The iframe Syntax

<iframe src="URL" title="Description"></iframe>

A Simple Iframe

The srcdoc attribute lets you write the inner page's HTML directly. This makes a frame that works with no other file:

<!DOCTYPE html>
<html>
<body>

<h2>My Page</h2>
<p>The box below is a separate little page:</p>

<iframe title="Welcome box" width="300" height="120"
  srcdoc="<h3>Hello from the iframe</h3><p>I am a different page.</p>">
</iframe>

</body>
</html>

The iframe has its own HTML, its own CSS and its own scroll bar. Styles on your page do not reach inside it.

Changing the Border and Size

Browsers draw a thin border around iframes. Change or remove it with CSS:

<iframe src="news.html" title="Latest news"
  style="width: 100%; height: 300px; border: 2px solid #e34c26;">
</iframe>

Embedding a YouTube Video

YouTube gives you ready-made iframe code. Open a video, click Share, then Embed, and copy the code. It looks like this:

<iframe width="560" height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="YouTube video player"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen>
</iframe>

Replace VIDEO_ID with the code after v= in the video's address. For https://www.youtube.com/watch?v=abc123XYZ, the embed address is https://www.youtube.com/embed/abc123XYZ.

Useful extras you can add to the address:

Embedding a Google Map

A map helps customers find your shop. In Google Maps, search for a place, click Share, then Embed a map, and copy the iframe. A simple version uses a search word in the address:

<!DOCTYPE html>
<html>
<body>

<h2>Find Our Institute</h2>
<p>Orangi Town, Karachi</p>

<iframe
  src="https://maps.google.com/maps?q=Orangi%20Town%20Karachi&output=embed"
  title="Map of Orangi Town, Karachi"
  width="100%" height="300" style="border:0;"
  loading="lazy" referrerpolicy="no-referrer-when-downgrade">
</iframe>

</body>
</html>

%20 in the address is a space. Change the words after q= to show any place.

Making an Iframe Responsive

Videos look best when the frame keeps a 16:9 shape on every screen. The CSS aspect-ratio property does this in one line:

<style>
  .video { width: 100%; aspect-ratio: 16 / 9; border: 0; }
</style>

<iframe class="video" src="https://www.youtube.com/embed/VIDEO_ID"
  title="Course introduction video" allowfullscreen></iframe>

Linking into an Iframe

A link can open its page inside an iframe. Give the iframe a name, and use the same name in the link's target:

<!DOCTYPE html>
<html>
<body>

<iframe name="viewer" title="Viewer" width="300" height="100"
  srcdoc="<p>Click a link above to change me.</p>"></iframe>

<p><a href="https://example.com" target="viewer">Open example.com in the frame</a></p>

</body>
</html>

Iframes and Safety

• Many sites (banks, Google search, Facebook) block being shown in an iframe. You will see an empty box or an error.
• Only embed pages you trust. The sandbox attribute removes powers like running scripts or opening pop-ups; add back only what you need, e.g. sandbox="allow-scripts".
• Always add title, so screen reader users know what the frame contains.

Exercise