HTML Iframes
HTML Iframe is used to display a nested webpage (a webpage within a webpage). The HTML <iframe> tag defines an inline frame, hence it is also called as an Inline Frame.
An HTML iframe embeds another document within the current HTML document in the rectangular region.
The webpage content and iframe contents can interact with each other using JavaScript.
Syntax of Iframe
<iframe src="URL"></iframe>
Set Width and Height of Iframe
You can set the width and height of iframe by using "width" and "height" attributes. By default, the values of the attributes are specified in pixels but you can also set them in percent. i.e. 50%, 60% etc.
Remove Border of Iframe
By default, an iframe contains a border around it. You can remove the border by using "style" attribute and CSS border property.
We can also change the size, color, style of the iframe's border. Below is an example to illustrate the same:-
Iframe Target For a Link
We can set a target frame for a link by using an iframe. Your specified target attribute of the link must refer to the name attribute of the iframe.
Here, in the above example, the name of the iframe and link target have the same value else the link will not open as a frame.
Whenever a user clicks on google.com, the Google link will open in the same frame as new1.html.
Embedded YouTube Video For an Iframe
You can embed a YouTube video on your webpage using the <iframe> tag. The video will be played on your webpage, and you can set properties such as height, width, autoplay, and more for the video.
Following are some steps to add YouTube videos on your webpage:
- Goto YouTube video which you want to embed.
- Click on SHARE ➦ under the video.
- Click on Embed <> option.
- Copy HTML code.
- Paste the code in your HTML file
- Change height, width, and other properties (as per requirement).
Attributes of Iframe
|
Attribute |
Value |
Description |
|
allowfullscreen |
|
If true then the frame can be opened in full screen. |
|
height |
Pixels |
It defines the height of the embedded iframe, the default height is 150 px. |
|
name |
text |
It gives the name to the iframe. The name attribute is important if you want to create a link in one frame. |
|
frameborder |
1 or 0 |
It defines whether iframe should have a border or not. (Not supported in HTML5). |
|
Width |
Pixels |
It defines the width of the embedded frame, and the default width is 300 px. |
|
src |
URL |
The src attribute is used to give the pathname or file name which content to be loaded into an iframe. |
|
sandbox |
|
This attribute is used to apply extra restrictions for the content of the frame.
|
|
srcdoc |
HTML_Code |
The srcdoc attribute is used to show the HTML content in the inline iframe. It overrides the src attribute (if a browser supports). |
|
scrolling |
|
It indicates that the browser should provide a scroll bar for the iframe or not. (Not supported in HTML5)
|
Supporting Browsers
|
Element |
|
|
|
|
|
|
Marquee |
Yes |
Yes |
Yes |
Yes |
Yes |
