HTML Iframes

An iframe (inline frame) shows another web page inside your page. It is used to embed things like YouTube videos, Google Maps and payment forms.

---

Syntax

<iframe src="https://www.example.com" width="600" height="400" title="Example page"></iframe>

Attribute	Meaning
src	Address of the page to show
width, height	Size of the frame
title	A short description. Needed for accessibility
loading="lazy"	Load the frame only when it comes near the screen
sandbox	Adds safety limits to the embedded page
name	Name used as the target of a link

---

Embed a YouTube video

On YouTube click Share, then Embed, and copy the code. It looks like this (replace VIDEO_ID with the real id).

<iframe width="560" height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="YouTube video player"
  allowfullscreen></iframe>

---

Link target in an iframe

If you give the iframe a name, a link can open its page inside that iframe using target.

<iframe src="page1.html" name="myframe" width="400" height="200" title="Demo frame"></iframe>

<a href="page2.html" target="myframe">Load page 2 in the frame</a>

---

Things to remember

• Many websites block embedding by sending a header (X-Frame-Options). Their page will show blank or an error inside your iframe.
• Do not embed pages you do not trust. Use sandbox to limit what they can do.
• Content inside an iframe is not counted as part of your page by search engines.
• Too many iframes slow down the page.

---

Summary

• Use <iframe> to embed another page inside yours.
• Always write title, width and height.
• The old frameset and frame tags are removed. Use iframe only.

• Previous Page
• Next Page

---

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.