Ever seen a YouTube video embedded on a page, or a Google Map inside a contact page? That is an iframe in action. The <iframe> tag lets you embed another HTML page inside your current page.
The Iframe Tag
<iframe> stands for "inline frame." You give it a src attribute pointing to the page you want to embed, and the browser creates a little window for it. You control the size with width and height.
<iframe src="https://example.com" width="600" height="400">
Your browser does not support iframes.
</iframe>
Try it Yourself โ
Embedding YouTube Videos
YouTube provides an embed code for every video. You just copy the <iframe> from YouTube's share menu and paste it into your page. The src will be something like https://www.youtube.com/embed/VIDEO_ID.
<iframe width="560" height="315"
src="https://www.youtube.com/embed/dQw4w9WgXcQ">
</iframe>
Security and Sandbox
By default, iframes can be a security risk โ the embedded page could run scripts or redirect the parent. Modern browsers support the sandbox attribute, which restricts what the iframe can do. You can allow specific features like allow-scripts or allow-forms.
<iframe src="https://example.com" sandbox="allow-scripts"></iframe>
Name Attribute for Targeting
You can give an iframe a name and then use it as a target for links. When a link with target="iframe-name" is clicked, the linked page opens inside the iframe instead of the main browser tab.