Labs ICT
โญ Pro Login

Iframes

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.

๐Ÿงช Quick Quiz

Which tag embeds another page inside your page?