HTML Iframes: <iframe> tag used to display the nested webpages (i.e. a webpage within a webpage). And we can define the iframe by enclosing them as <iframe>. Moreover, the HTML iframes are embedded in another document within the current HTML document in the rectangular region.
HTML Iframes
The webpage content and iframes content can interact with each other using javascript.
Syntax:<iframe src=”URL”></iframe>
“src” attribute specifies the web address (URL) of the inline frame page.
HTML Iframe Height and Width
You can set the height and width in HTML Iframe by using “height” and “width” attributes. But default the values of the attributes are specified in pixels but you can also set them in percentage format i.e. 50%, 60%, etc.,
Example: Pixels
<!DOCTYPE html> <html> <body> <h2>HTML Iframes example</h2> <p>Use the height and width attributes to specify the size of the iframe:</p> <iframe src="https://tutorials.freshersnow.com/" height="300" width="400"></iframe> </body> </html>
Example: Percentage
<!DOCTYPE html> <html> <body> <h2>HTML Iframes</h2> <p>You can use the height and width attributes to specify the size of the iframe:</p> <iframe src="https://tutorials.freshersnow.com/" height="50%" width="70%"></iframe> </body> </html>
Example: You can also use CSS to set height and width attributes
<!DOCTYPE html> <html> <body> <h2>HTML Iframes</h2> <p>Use the CSS height and width properties to specify the size of the iframe:</p> <iframe src="https://tutorials.freshersnow.com/" style="height:300px;width:400px"></iframe> </body> </html>
Remove Border of Iframe
You can remove the border by using <style> attribute and CSS property.
Example:
<!DOCTYPE html> <html> <body> <h2>Remove the Iframe Border</h2> <p>This iframe example doesn't have any border</p> <iframe src="https://tutorials.freshersnow.com/" style="border:none;"></iframe> </body> </html>
Change size, Color & Style of Iframe Border
Example:
<!DOCTYPE html> <html> <body> <h2>Custom Iframe Border</h2> <iframe src="https://tutorials.freshersnow.com/" style="border:2px solid tomato;"></iframe> </body> </html>
Attributes of Iframes
| Attribute Name | Value | Description |
|---|---|---|
| allowfullscreen | If it is true then the frame will open in fullscreen | |
| height | pixels | Defines the height of the embedded iframe whereas the default height is 150px |
| name | text | gives the name to iframe |
| frameborder | 1 (or) 0 | defines whether iframe should have a border (or) not |
| width | pixels | defines the width of the embedded frame and default width is 300px |
| src | URL | used to give pathname (or) file name which content to be loaded into the iframe |
| sandbox | tm_wday | used to apply extra restrictions for the content of the frame |
| srcdoc | used to show the HTML content in the inline iframe. And also overrides the src attribute | |
| scrolling | indicates that the browser should provide a scroll bar for the iframe (or) not |