This site is mobile accessible. Press the "Tap Here" button to use a smaller font-size.
Smartphone icons created by Freepik - Flaticon
An HTML iframe is used to display a web page within a web page.
Use Iframe to display another webpage here
The HTML tag specifies an inline frame. An inline frame is used to embed another document within the current HTML document.
<iframe src="url" title="description">
Tip: It is a good practice to always include a title attribute for the . This is used by screen readers to read out what the content of the iframe is.
Use the and attributes to specify the size of the iframe. The and are specified in pixels by default:
If you are designing web pages to be viewed by cellphone users, I recommend not setting the attribute or set it no wider than 325px as it may break the page when displayed on cellphones but will still display well on larger screens. By experimenting with my Google Pixel II, I found that the Iframe set at 325px fit the screen while in portrait and does adjust to a slightly larger display of the Iframe when rotated to landscape. Meanwhile it still looks awesome on larger screens.
<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe>
On further testing I found not setting the or setting it to 300px has the same effect across all screen sizes. It is related to setting the <meta name="viewport" content="width=device-width, initial-scale=1"> in the head of the page. This setting makes the webpage mobile friendly. When I disabled viewport on this page the text got larger in Google Chrome but considerably smaller in Firefox mobile on my phone. It also caused the Iframe to display on my phone at the width specified.
In Linux, there is a little known or used native file browser called konqueror that may be used as a web browser. The beauty of this application is that it may be sized down to less than 300px wide. However it does not support a lot of things. It does not support viewport, so I get to see how web pages look on older phones that do not support viewport. The default minimum width appears to be 250px. When I size it to less than 250px, when I go to another webpage it automatically increases to 250px wide. These are my observations.
Or you can add the style attribute and use the CSS height and width properties:
<iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="Iframe Example"></iframe>
By default, an iframe has a border around it. To remove the border, add the attribute and use the CSS property:
<iframe src="demo_iframe.htm" style="border:none;" title="Iframe Example"></iframe>
With CSS, you can also change the size, style and color of the iframe's border:
<iframe src="demo_iframe.htm" style="border:2px solid red;" title="Iframe Example"></iframe>
An iframe can be used as the target frame for a link. The attribute of the link must refer to the attribute of the iframe:
<iframe src="demo_iframe.htm" name="iframe_a" title="Iframe Example"></iframe> <p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>
This is a very interesting lesson.
| Tag | Description |
|---|---|
| <iframe> | Defines an inline frame |
For a complete list of all available HTML tags, visit HTML Tag Reference.