1. Home
  2. HTML iframe Tag

HTML iframes

HTML Iframe is used to display a nested webpage (a webpage within a webpage). The HTML

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.

Iframe Syntax

An HTML iframe is defined with the

Here, "src" attribute specifies the web address (URL) of the inline frame page.

Set Width and Height of iframe

You can set the width and height of iframe by using "width" and "height" attributes. By default, the attributes values are specified in pixels but you can also set them in percent. i.e. 50%, 60% etc.

Example: (Pixels)

Test it Now

Example: (Percentage)

Test it Now

You can also use CSS to set the height and width of the iframe.

Example:

Test it Now

Remove the border of iframe

By default, an iframe contains a border around it. You can remove the border by using

This is a link below the ifarme click on link to open new iframe.

Embed YouTube video using iframe

You can also add a YouTube video on your webpage using the

Following are some steps to add YouTube video on your webpage:

Example:

Test it Now

Output:

HTML iframes

Attributes of

Attribute name Value Description
allowfullscreen If true then that frame can be opened in full screen.
height Pixels It defines the height of the embedded iframe, and 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 embedded frame, and default width is 300 px.
src URL The src attribute is used to give the path name or file name which content to be loaded into iframe.
sandbox
This attribute is used to apply extra restrictions for the content of the frame
allow-forms It allows submission of the form if this keyword is not used then form submission is blocked.
allow-popups It will enable popups, and if not applied then no popup will open.
allow-scripts It will enable the script to run.
allow-same-origin If this keyword is used then the embedded resource will be treated as downloaded from the same source.
srcdoc 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 browser should provide a scroll bar for the iframe or not. (Not supported in HTML5)
auto Scrollbar only shows if the content of iframe is larger than its dimensions.
yes Always shows scroll bar for the iframe.
no Never shows scrollbar for the iframe.
Next TopicHTML JavaScript




Hot Tutorials

Contact US

Email:[email protected]

HTML iframe Tag
10/30